[JUSTCODE] Advanced Foundation - React (리)렌더링, 조건부 렌더링

(리)렌더링

화면에 UI를 그리는 것을 렌더링이라고 한다.

 

(리)렌더링의 과정

1. 컴포넌트가 렌더링 된다. (이것을 mount라고 한다.)
2. useEffect의 콜백함수가 실행된다. (이것을 side Effect라고 한다.)
3. (리)렌더링은 state, props 등이 변경된 경우에 발생한다.
4. useEffect의 의존성배열에 따라 렌더링이 달라진다.(의존성 배열이 없다면 -> 맨 처음에만 실행, 값이 있다면 -> 그 값이 변할 때마다 실행)
5. state, props의 값이 변경되면 리렌더링된다.

 

ex)

부모 컴포넌트

import React, {useState, useEffect} from 'react';
import Child from './Child';

function Parent() {
	const [firstData, setFirstData] = useState([]);
	const [secondData, setSecondData] = useState({});

	//1. useEffect
	useEffect(() => {
		console.log("부모 컴포넌트 마운트 후");

		fetch("http://localhost:3001/data/lifecycleErrorData.json")
      .then(res => res.json())
      .then(res => {
			  console.log("부모 컴포넌트 fetch 완료");

				setFirstData(res.data);
			});

    return () => {
			// clean up 함수
      // unmount 될 때
		}
	}, []);

	//2. useEffect
	useEffect(() => {
		console.log("부모 컴포넌트 (리)렌더링 후");
  });

	console.log("부모 컴포넌트 (리)렌더링 전");

	return (
	<>
	  <h1>Parent</h1>
    <Child childData={firstData} />
	</>);
}

export default Parent;

자식 컴포넌트

import React, {useEffect} from 'react';

function Child(props) {
	useEffect(() => {
		console.log("자식 컴포넌트 마운트 후");
	}, []);

	useEffect(() => {
		console.log("자식 컴포넌트 (리)렌더링 후");
  });

	console.log("자식 컴포넌트 (리)렌더링 전");

	return (<h1>Child is here!!</h1>);
}

export default Child;

console.log 실행순서

1. 부모 컴포넌트 (리)렌더링 전
2. 자식 컴포넌트 (리)렌더링 전
3. 자식 컴포넌트 마운트 후
4. 자식 컴포넌트 (리)렌더링 후
5. 부모 컴포넌트 마운트 후
6. 부모 컴포넌트 (리)렌더링 후
7. 부모 컴포넌트 fetch 완료
8. ---첫번 째 렌더링 완료---
9. 부모 컴포넌트 (리)렌더링 전
10. 자식 컴포넌트 (리)렌더링 전
11. 자식 컴포넌트 (리)렌더링 후
12. 부모 컴포넌트 (리)렌더링 후

fetch 함수가 부모 컴포넌트 (리)렌더링 후보다 늦게 찍히는 이유는?

비동기 함수이기 때문에 실행하는 데에 시간이 걸리기 때문

 

중요 포인트

부모 컴포넌트가 렌더링되면, 자식 컴포넌트도 렌더링 된다.

 

 

조건부 렌더링

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

 

조건부 렌더링에서는 삼항 연산자나 && 연산자를 사용한다. 그 차이는 무엇일까?

 

• 삼항 연산자는 true일 때와 false일 때 각기 다른 값을 렌더링 할 수 있다.
• 반면에 && 연산자는 값이 true일 때만 렌더링 된다.

&&연산자 사용 시 주의사항

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