[React]라이프사이클 Lifecycle (+unique key prop에러)

 Lifecycle 

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

리액트 라이프 사이클 (링크)

 

componentDidMount()

• componentDidMount()까지는 DOM에 없다
• componentDidMount()이 선언되는 순간부터 사용할 수 있음
• 일회용. 한번만 불리고 땡!

 

 

Re-render의 조건

• setState가 업데이트 됐을 때
• props가 바꼈을 때 "리렌더"가 된다. 

 

기본 LifeCycle

1. 컴포넌트 생성 시
   construct > componentWillMount > render > componentDidMount 순으로 진행
2. 컴포넌트를 제거할 때는
   componentWillUnmount 메소드만 실행
3. 컴포넌트의 prop이 변경될 때
   componentWillReciveProps > shouldComponentUpdate > componentWillUpdate > render > componentDidUpdate 순으로 진행
4. state가 변형될 때
   shouldComponentUpdate부터 시작

 

부모 - 자식 Lifecycle

Parent constructor
Parent render
Child constructor
Child render
Child componentDidMount
Parent componentDidMount
Parent fetch 완료
-------리렌더 조건 발생
Parent render
Child render
Child componentDidUpdate
Parent componentDidUpdate

 

메서드 종류

constructor () 

• 생성자 메소드, 컴포넌트가 처음 만들어질 때 실행.
• 기본 state를 정의할 수 있음
• 컴포넌트가 처음 만들어 지는 것을 Mount라고 함

componentWillMount()

• 컴포넌트가 DOM 위에 만들어지기 전에 실행
• DOM 엘리먼트 레퍼런스를 획득할 수 없음

render()

• 컴포넌트를 렌더링

componentDidMount()

• 컴포넌트가 만들어지고 첫 렌더링을 마친 후 실행되는 메소드
• 다른 JavaScript 프레임워크를 연동하거나, setTimeout, setInterval 및 Ajax 처리 등을 넣음

componentWillReceiveProps()

• 컴포넌트가 prop을 새로 받았을 때 실행
  이 안에서 this.setState() 를 해도 추가적으로 렌더링을 하지 않음
• prop에 따라 state를 업데이트 해야할 때 사용할 때 유용

shouldComponentUpdate()

• prop혹은 state가 변경 되었을 때, 리렌더링을 할지말지 정하는 메소드

componantWillUpdate()

• 컴포넌트가 업데이트 되기 전에 실행
• 이 안에 this.setState()를 사용하면 무한루프에 빠짐

componentDidUpdate()

• 컴포넌트가 리렌더링을 마친 후 실행

componentWillUnmount()

• 컴포넌트가 DOM에서 사라진 후 실행

 

---

 

조건부 랜더링

• 값이 없을 때의 예외처리를 해줘야 함 ★★★★
• 당장 눈에 값이 잘 나온다고 '어? 되네?' 금지🙅‍♀️
• 값이 있야 렌더되야 할  요소의 경우 &&연산자 활용

자바스크립트에서 true && expression 은 항상 expression 으로 평가되고, false && expression 은 항상 false 로 평가되기 때문에 이 코드는 동작합니다.

따라서 조건이 true 라면 && 다음에 오는 요소가 노출됩니다. 만약 조건이 false 라면, React는 이를 무시하고 건너뜁니다.

출처 - reactjs (논리 && 연산자가 있는 인라인 조건)

 

 

unique key prop에러

• 컴포넌트에 key 꼭 넣기(React Key)
• Key는 React가 어떤 항복을 변경, 삭제, 추가 할 건지 식별하게 함
• 대부분 데이터의 id를 key로 사용