Today What I Learned

Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다.

어제는 하루 종일 React 공식 문서에서 주요 개념 12개를 정독하느라 엄청 고생을 했다. 한 챕터 이해하고 나면 또 새로운 내용이 나오고, 또 나오고 또 나오고... 정말 괴로웠다.
오늘은 어제 처음 익혔던 내용을 다시 한 번 복습한 내용을 TIL로 대체한다.

1. functional component vs class component : 언제 사용할 것인가?

• 함수형 컴포넌트는 state를 사용하지 않는 컴포넌트(stateless component)로 가벼움
• 클래스 컴포넌트는 state 핸들링 가능, 변경 가능한 데이터를 하위 컴포넌트로 내려 보낼 수 있음

2. props & state

• props: 상위 컴포넌트가 하위 컴포넌트에게 주는 데이터, read-only로 변경 불가능
• state: 각 컴포넌트가 가지고 있는 상태, 이벤트에 따라 변경 가능

3. React의 data flow

• 단방향 상→하의 데이터 구조, data는 상위로 올라갈 수 없고 내려온다.
• 하위 컴포넌트의 이벤트로 인해 상위 컴포넌트의 state가 변경되어야 하는 상황이라면?
• 변경 시키고 싶은 state를 가진 컴포넌트에서 함수(setState로 state를 변경시키는 역할) 생성
• 매우 중요: 함수 자체를 props로 하위 컴포넌트에 넘김
• 하위 컴포넌트에서 props를 이용해 함수 실행, 이 때는 this 바인딩 꼭 필요!
  → 함수 실행 결과, 상위 컴포넌트의 state가 바뀜
  

4. setState 이후 일어나는 일

• state가 바뀌면 state를 가지고 있는 본인 컴포넌트와 하위의 모든 컴포넌트에서 이전 내용과 비교하여 state가 변경된 경우 다시 render

5. 직접적인 DOM 처리 금지!

• querySelector 등으로 DOM append 등의 조작을 하면 안됨!
  • React가 추구하는 최적화 때문!
    • React는 브라우저의 rendering 비용(computing source)를 줄이고자 자바스크립트로 가상 DOM을 구상해 실제 렌더 된 DOM과의 비교를 진행하고, 비교 결과 변경된 부분만 다시 렌더하는 최적화 작업을 진행한다.
    • 이 때 DOM을 직접적으로 변경하면 최적화의 장점을 살릴 수 없게 된다!

6. 컴포넌트의 사용

• 1개의 기능만 담당하는 것이 이상적
• 컴포넌트들을 담은 최상위 컴포넌트는 "container"라고 불림

7. 주요 라이프사이클

• componentDidMount: 렌더 직후 실행되는 함수로, 서버와 통신이 필요한 비동기 함수 처리 시 사용하면 좋다.
• componentDidUpdate: 업데이트 직후 이전 값과 나중 값을 비교할 수 있다. 자동 저장이 되는 노트 앱 같은 경우 이 기능을 사용할 수 있다.
• componentWillUnmount: 컴포넌트가 사라지기 전에 실행되는 함수로, 컴포넌트에 걸려 있던 이벤트(ex:setInterval)도 같이 삭제할 때 사용할 수 있다. unmount 시 state의 변수를 false로 바꾸어주도록 하고, render 시에는 이 state 변수를 사용해서 if문을 추가하여 실행하는 방식이 되겠다.