[TIL] 23_0117 CRA, 컴포넌트, 렌더링, JSX

CRA (Create React App) 

 - 한 줄의 명령어로 React  프로젝트 개발에 필요한 요소들을 자동으로 구성하는 방법이야.

- 실행 방법

yarn create react-app 폴더이름

이런 경우 React 프로젝트를 구성하기 위해 필요한 것들을 한 방에 알아서 깔아줘서 편해. 

 

-추가로, 리액트에 필요한 패키지를 설치해줄 때 명령어야.

yarn add 패키지 이름

 

 

컴포넌트 

- uiux요소를 표현하는 최소한의 단위인데 리액트의 핵심 구축 블록 중 하나야. 

- 리액트에서 개발한 모든 애플리케이션은 컴포넌트란 조각, 블록으로 구성돼. 헤더블록, 메인 블록, 푸터 블록 등으로.

 

리액트 컴포넌트를 표현하는 방법엔 두가지가 있어.

- 함수형 컴포넌트

- 클래스형 컴포넌트

 

렌더링

- 리액트 앱이 실행되고 첫 렌더링이 일어나면, 컴포넌트의 루트에서 시작해서 아래로 쭉 훑으면서 컴포넌트가 반환하는 JSX결과물을 DOM요소에 반영해줘. 

 

그 렌더링이 발생하는 경우는 첫 리액트 앱을 실행했을 때 말고도, 현재 리액트 내부에 어떤 상태(state)에 변경, 수정이 발생했을 때야. 컴포넌트의 내부 state가 변경되었거나 새로운 props가 들어오거나, 상위 부모 컴포넌트에서 이런 두 이유로 렌더링이 발생했을 때야. 

 

JSX

- HTML을 품은 JS인데, Javascript를 확장한 문법이야. return문 안에서 html과 같은 형태로 있어. 자바스크립트는 중괄호 안에 쓸수 있어. 

- 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯 작성하는 방식을 JSX라고 해. 

 

 

느낀 점 

- 컴포넌트 표현 방법이 함수형과 클래스형이 있는데 주로 함수형을 선호해. 이건 생명주기와 렌더링과 관련해서 나중에 정리해보려고 해.

- 그냥 어려운 단어로 다가왔는데 풀어서 보니 그냥 javascript + XML(HTML)을 합친 방식이란 걸 알게 됐어.