ℹ️ React 자습서 학습
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.
"컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성한다.
React 컴포넌트 클래스는 render 함수를 통해 화면에서 보고자 하는 내용을 반환한다.
"JSX"라는 특수한 문법을 사용하여 React의 구조를 보다 쉽게 작성할 수 있다.
React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 한다.
props를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 정보가 흘러가게 할 수 있다.
무언가를 "기억하기"위해 component는 state를 사용한다.
React 컴포넌트는 생성자에 this.state를 설정하는 것으로 state를 가질 수 있다.
컴포넌트에서 setState를 호출하면 React는 자동으로 컴포넌트 내부의 자식 컴포넌트 역시 업데이트한다.
여러개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하려면 부모 컴포넌트에 공유 state를 정의해야 한다.
부모 컴포넌트는 props를 사용하여 자식 컴포넌트에 state를 다시 전달할 수 있다.
이것은 자식 컴포넌트들이 서로 또는 부모 컴포넌트와 동기화 하도록 만든다.
React에서 이벤트를 나타내는 prop에는 on[Event], 이벤트를 처리하는 함수에는 handle[Event]를 사용하는 것이 일반적이다.
일반적으로 데이터 변경에는 두 가지 방법이 있다.
첫 번째는 데이터의 값을 직접 변경하는 것이고, 두 번째는 원하는 변경 값을 가진 새로운 사본으로 데이터를 교체하는 것이다.
직접적인 객체 변경이나 기본 데이터의 변경을 하지 않는다면 아래에 기술된 몇 가지 이점을 얻을 수 있다.
- 복잡한 특징들을 단순하게 만든다.
- 변화를 감지한다.
- React에서 다시 렌더링하는 시기를 결정한다.
React에서 함수 컴포넌트는 더 간단하게 컴포넌트를 작성하는 방법이며 state 없이 render 함수만을 가진다.
함수 컴포넌트는 클래스로 작성하는 것보다 빠르게 작성할 수 있으며 많은 컴포넌트를 함수 컴포넌트로 표현할 수 있다.
리스트를 렌더링할 때 React는 렌더링하는 리스트 아이템에 대한 정보를 저장한다.
리스트를 업데이트 할 때 React는 무엇이 변했는 지 결정해야 한다.
리스트 아이템에 key prop을 지정하여 각 아이템이 다른 아이템들과 다르다는 것을 알려줄 수 있다.
- 현재 리스트에서 이전에 존재하지 않는 키를 가지고 있다면 React는 새로운 컴포넌트를 생성한다.
- 현재 리스트가 이전 리스트에 존재했던 키를 가지고 있지 않다면 React는 그 키를 가진 컴포넌트를 제거한다.
- 만약 두 키가 일치한다면 해당 구성요소는 이동한다.
키가 지정되지 않은 경우 React는 경고를 표시하며 배열의 인덱스를 기본 키로 사용한다.
배열의 인덱스를 키로 사용하는 것은 리스트 아이템 순서를 바꾸거나 아이템을 추가/제거 할 때 문제가 된다.
키는 전역에서 고유할 필요는 없으며 컴포넌트와 관련 아이템 사이에서는 고유한 값을 가져야 한다.