TIL_50_Life Cycle 과 조건부 랜더링

Lifecycle 기본 순서

1. constructor
2. render
3. componentDidMount
4. (fetch 완료)
5. 다시 render
6. (setState)
7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)
8. componentWillUnmount

• state에 담긴 데이터를 변경하고 그 데이터의 내용을 업데이트 하기 위해서 라이프 사이클 메소드를 사용하는 것.
• 하나의 상세페이지에 해당하는 컴퍼넌트의 데이터만 바꿔주는 것이기 때문에 데이터를 바꿔주고 나서 다시 랜더를 해줘야만 한다.
• 이미 최초의 랜더가 끝난 컴퍼넌트의 데이터를 변경하고자 할 때는 스테이트를 변경해줘야 한다. 그 때 쓰는 메소드가 componentDidUpdate.
• 생성이 가능하다면, 사라지는 것도 가능. 이 때 쓰는 메소드가 componentWillUnmount.
  보통에는 쓸 일이 없을 수 있다. 어떤 이벤트가 끝이나면 종료시키기 위한 것.
  타이머 기능을 가진 컴퍼넌트 같은 것에 쓰인다.
• setState 를 하면 다시 setState 를 할 때마다 랜더가 되지만, 패치 함수를 다시 부를 때는 componentDidUpdate 가 필요하다.
• 어떤 새로운 데이터를 받아와야 할 때는 componentDidMount 를 쓸 수 없다. 그래서 componentDidUpdate 를 통해 새로운 데이터를 가져와야 하는 것이다.

부모 - 자식 Lifecycle

• 부모 API에서 받은 데이터를 자식에게 props로 전달하여 자식 내부에서 데이터에 접근하여 사용하는 경우
  컴퍼넌트는 독립적이나, 어떤 컴퍼넌트 내에서 그 컴퍼넌트가 불려질 수 있다. 그게 바로 부모와 자식 관계임.
  
  

이런 경우 어떤 순서대로 진행이 될까?

1.부모 constructor
2.부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
3.자식 constructor
4.자식 render
5.자식 componentDidMount (여기까지 하고 부모 컴포넌트로 다시 넘어감)
6.부모 componentDidMount
7.부모 fetch 완료 (setState 발생 > 업데이트 발생 > 다시 render)
8.부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
9.자식 render
10.자식 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생. 여기까지 하고 다시 부모로 넘어감.)
11.부모 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생)

자식 내부에서 조건부 랜더링을 활용

• 데이터를 불러올 때 또는 컴퍼넌트 내부에서 필요한 데이터를 백앤드로부터 받아올 때 componentDidMount 메소드 안에서 패치 함수를 사용한다.
• 패치 함수로 받아온 데이터를 state 안에 넣어준다.
• 배열의 데이터 형태를 분해할 때는?
  맵 메소드를 활용하여 배열 데이터 안에 있는 객체나 값들을 가져와서 새로운 배열 안에 넣어준다.

조건부 랜더링?

&&연산자(엔드 연산자) - 논리연산자.
특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 랜더링 하지 않아야 하는 상황에서는 조건부 연산자를 통해 구현할 수 있다.

빨간색 표시된 부분이 "this.state.data[0] 이 true 인 경우에만 this.state.data[0].name 을 렌더하겠다" 라는 뜻
위처럼 조건을 걸어서 내가 원하는 데이터가 있는 경우에만 랜더링을 시켜주는 방법으로 에러를 해결할 수 있다.

&&연산자 사용 시 주의해야할 점!

• 변수가 숫자 타입인 경우 0은 false 이다.
• 변수가 문자열 타입인 경우 빈 문자열“”도 false이다.

{this.state.data.message &&
this.state.data.message.map((msg, idx) => {
return <li key={idx}> {msg}</li>;
})}

값이 있을 때 맵함수를 돌려줘야 하는데
랜더에 필요한 데이터를 받기도 전에 맵 함수를 돌리려하니, 오류가 발생하는 것.

모달창? 원래 페이지 위에 창이 하나 더 뜨는 것. 경로가 이동되는 것이 아님.

this.state= {
isMondalView: false
}

handleModal = () => {
//console.log("클릭"); 
}

<button className="addToCart" 
  onclick={this.handleModal}>구매하기</button>

//클릭이 먹히는 것을 확인.

this.state= {
this.setState({isModalView: !this.state.isModalView})
}

handleModalon = () => {
this.setState({isModalView: true})
}

handleModalOff = () => {
this.setState({isModalView: false})
}

//-> 중복되는 두 함수를 하나의 함수로 합해준 것.

return (
<>
{this.state.isModalView && 
  <Modal handleModal={this.handleModal} />}

//그리고 자식 컴퍼넌트에 props 넘겨주기

<button onClick={this.props.handleModal}>close</button>