TIL_리렌더링, 조건부 렌더링 연습하기

1. (리)벤더링: 부모와 자식 컴포넌트 이해하기

부모컴포넌트와 자식 컴포넌트 처리되는 순서를 알아야함.

부모 컴포넌트

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

function Parent() {
	const [firstData, setFirstData] = useState([]);
	const [secondData, setSecondData] = useState({});
    
//6. 부모 컴포넌트 마운트 후 (자식 컴포넌트까지 다 그림)
	useEffect(() => {
		console.log("부모 컴포넌트 마운트 후");


fetch("http://localhost:3001/data/lifecycleErrorData.json")
      .then(res => res.json())
      .then(res => {
      
// 8.fetch 함수는 비동기적으로 실행이 되니 다음 useEffect 안에 있는 코드 실행      
			  console.log("부모 컴포넌트 fetch 완료");

//9. setter함수가 실행되고 state가 update되니 리렌더링 실행
				setFirstData(res.data);
			});

    return () => {
			// clean up 함수
      // unmount 될 때
		}
	}, []);
    
//7. 부모 컴포넌트 마운트 후
//13. 부모 컴포넌트 리렌더링 후
	useEffect(() => {
		console.log("부모 컴포넌트 (리)렌더링 후");
  });

// 1. 제일 먼저 마운트가 됨.
//10. 리 렌더링
	console.log("부모 컴포넌트 (리)렌더링 전");

	return (
	<>
	  <h1>Parent</h1>
 // 2. 그 다음 마운트가 될테니 child 컴포넌트가 출력됨.
    <Child childData={firstData} />
	</>);
}

export default Parent;

자식 컴포넌트

import React, {useState, useEffect} from 'react';

function Child(props) {

//4. 자식 컴포넌트 마운트 후
//13.이 아닌이유 : 의존성 배열에 빈배열로 뒀기 때문 : 초기 랜더링에서만 실행
	useEffect(() => {
		console.log("자식 컴포넌트 마운트 후");
	}, []);
    
//5. useEffect 순서대로 실행
//12.
	useEffect(() => {
		console.log("자식 컴포넌트 (리)렌더링 후");
  });

//3. 자식 컴포넌트 마운트
//11.
	console.log("자식 컴포넌트 (리)렌더링 전");
	return (<h1>Child is here!!</h1>);
}

export default Child;

2. 조건부 렌더링 활용 / 컴포넌트 재사용해서 블럭 쌓기 연습

버튼을 아무 순서대로 눌러도 박스는 순서대로 쌓아져야함
(블럭들은 각자의 자리가 있음/ 조건부 렌더링 : 있으면 보여주고 없으면 숨기면 됨.)

(1) 부모 컴포넌트에서 버튼 만들기 - 버튼에 onclick 이벤트 지정

function Parent() {
const [firstBlcok, setFirstBlock] = useState(false);
const [secBlcok, setSecBlock] = useState(false);
const [thirdBlcok, setThirdBlock] = useState(false);// 처음에는 안보이는 상태

 return (
 <div>
 <button onClick={() => setFirstBlock((prev) => !prev)}>
  블럭1 버튼 // 버튼을 누르면 박스가 생기고 다시 버튼을 누르면 이전 단계로 사라지게 만들어야함. -> 이전단계를 반대로 바꿔준다는 말
  </button>
 <button onClick={() => setSecBlock((prev) => !prev)}>
  블럭2 버튼
 </button>
 <button onClick={() => setThirdBlock((prev) => !prev)}>
  블럭3 버튼
 </button>
 </div>
 <div className="block">
 {firstBlock && <div> 블럭 1 </div>} //firstBlock이 true면 뒤에 실행
 {secBlock && <div> 블럭 2 </div>}
 {thirdBlock && <div> 블럭 3 </div>}
 </div>

(2) 자식 컴포넌트에서 버튼 누르면 쌓아지는 블럭 만들기
컴포넌트 재사용은 밑에 나오는 블럭들이 가능함.

<div className="block">
 {firstBlock && <div> 블럭 1 </div>} //firstBlock이 true면 뒤에 실행
 {secBlock && <div> 블럭 2 </div>}
 {thirdBlock && <div> 블럭 3 </div>}
 </div>

⏬ ⏬ ⏬
props로 값을 넘겨주면 컴포넌트 재사용 가능

<Parent.js>
<div className="block">
{firstBlock && <Child num={1}/>} 
{secBlock && <Child num={2}/>}
{thirdBlock && <Child num={3}/>}
</div>

<Child.js>

function Child({ num }) {
 return <div> 블럭 {num} </div>;
}

export default Child;