UI 표현하기

React는 UI를 렌더링하기 위한 JavaScript 라이브러리
UI는 버튼, 텍스트, 이미지 같은 작은 요소로 구성된다.
React는 재사용가능하고, 중첩가능한 component를 조합하여 사용한다.

첫 컴포넌트, Import 및 Export

React는 컴포넌트를 별도의 파일로 저장하고 export하여 다른 파일에서 import해서 사용할 수 있다.
export된 파일은 여러번 재사용할 수 있다.

JSX로 마크업 작성하기

리액트 컴포넌트는 리액트가 브라우저에 런더링하는 마크업을 포함하는 JS 함수다.
리액트 컴포넌트는 이 마크업을 표현하기위해 JSX(Javascript Syntax eXtension)라는 확장된 문법을 사용한다.

JSX에서 중괄호를 이용하여 JavaScript 사용하기

jsx에서 return 부분 내에서 {}중괄호를 사용하면 JS를 사용할 수 있다.
로직을 추가하거나 동적인 프로퍼티 참조에 사용한다.

컴포넌트에 Props 전달하기

리액트 컴포넌트는 서로 통신하기 위해 props를 사용한다.
모든 부모 컴포넌트는 자식 컴포넌트한테 props를 통해 정보를 넘긴다.
props는 객체, 배열, 함수, jsx등 모든 js값을 전달할 수 있다.

조건부 렌더링

if, &&, ? : 등을 사용해 조건부 렌더링을 할 수 있다.

리스트 렌더링

filter()와 map()을 함께 사용하여, 배열을 필터링하고 컴포넌트 배열로 변환할 수 있다.
각 배열 항목마다 key값을 정해서(주로 id) 리스트가 변경되더라도 리액트가 각 항목의 위치를 추적할 수 있도록 한다.

컴포넌트 순수하게 유지하기

순수 함수

• 자신의 일만 처리 : 호출되기 전에 존재한 어떤 객체나 변수도 변경하지 않음
• 입력이 같으면 출력도 같음

순수 함수로 컴포넌트를 구성해야, 예상하기 어려운 버그를 피할 수 있음
변수를 변경하는 대신, prop을 통해 직접 값을 전달하면 컴포넌트를 순수하게 유지할 수 있음

트리로서의 UI

리액트는 컴포넌트와 모듈간의 관계를 모델링하기 위해 트리 사용
트리를 그려보는 것은 문제를 디버깅하는데 도움이 됨

최상단 컴포넌트 : 트리의 상단에 위치한 컴포넌트, 루트 컴포넌트 근처의 컴포넌트
리프 컴포넌트 : 자식 컴포넌트가 없는 컴포넌트

모듈 의존성 트리 : js 모듈 간의 관계를 모델링