Lifecycle

Lifecycle 기본 순서

1. constructor
2. render
3. componentDidMount
4. fetch완료
5. render
6. setState
7. componentDidUpdate(setState 되어서 업데이트 발생)
8. componentWillUnmount

자식 컴포넌트가 복수일경우

자식1render 자식1componentDid -> 자식2render 자식2componentDid

순서가아닌

자식1render 자식2render -> 자식1componentDid 자식2componentDid

순서이다.

조건부 렌더링

• 정의 : 컴포넌트 함수 내부에서 특정 값에 따라 선택적으로 렌더링하는 것

  조건에 따라 두가지를 달리보여주는 경우 삼항연산자를 사용하지만
  한가지 조건이라면 &&연산자를 사용하는 것이 가독성이 좋다.

ex)
 class Welcome extends Component {
  render() {
	const { isLogin, name, point } = this.props;
	  return {
		<div>
		  {isLogin && (
			<div>
			  <p>{name}님 환영합니다!</p>
			  <p>현재 보유중인 포인트는 {point}원 입니다.</p>
			</div>
		 	)}
		 	</div>
			}
		}

Life Cycle에 관련된 에러 핸들링
어느 순간에 잠깐 해당값이 비어있더라도 바로 에러가 날 것이다.
이는 Life Cycle을 제대로 이해하고 있다면 쉽게 해결할 수 있을 것 이다.
조건부 렌더링시 componentDidUpdate 일어난 후
이러한 조건을 주어 에러를 예방해보자