-
[React] 부모 자식 컴포넌트의 흐름Frontend/React 2022. 7. 25. 13:37
부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?
컴포넌트란
리액트에서 컴포넌트란 화면을 구성하는 하나의 단위이다.
// App 컴포넌트 function App (){ return <div></div> }
하나의 블럭 개념인데 즉 그냥 함수이다. 리액트에서 컴포넌트를 만든다라는 건 return값으로 html을 반환하는 함수를 뜻한다.
### 흐름 설명
컴포넌트 A에서 “르탄이”라는 state를 “진도사우르스” 변경 ->
부모 컴포넌트에서 Updating이 발생 ->
shouldComponentUpdate 가 실행 ->
바뀐 props를 이용하여 부모 컴포넌트의 렌더링 ->
마찬가지로 바뀐 props를 이어받아 컴포넌트 B의 렌더링이 실행됨1. 부모에서 자식으로 데이터 전달하는 방법
→ props를 이용한다.
*props란, properties를 줄인 표현으로 컴포넌트 속성을 설정할 대 사용하는 요소이다.
부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다.
(자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻이다.)
Parent.js
import React, { useState } from 'react' import Child from './Child'; const Parent = () => { const [number, setNumber] = useState(0); const onClick = () => { setNumber(number + 1); } /*number가 props다.*/ return ( <div> <Child number={number}></Child> <button onClick={onClick}>+</button> </div> ) } export default Parent;
Child.js
import React from 'react' /*number는 props다.*/ const Child = ({ number }) => { return ( <div> <p>여기는 child입니다 : {number}</p> </div> ) } export default Child;
2. 자식에서 부모로 데이터를 전송하는 방법
→ 함수를 이용한다.
자식은 props를 사용해서 부모에게 데이터를 건네줄 수 없다.
따라서 부모가 함수를 넣어 props로 자식에게 넘겨주면, 자식이 데이터를 파라미터로 넣어 호출하는 방식으로 동작한다.
즉, 부모가 props로 함수를 넣어주면 자식이 그 함수를 이용해 값을 건네주는 방식이다.
Parent.js
import React, { useState } from 'react' import Child from './Child'; const Parent = () => { const [number, setNumber] = useState(0) const getData = (number) => { setNumber(number); } return ( <div> <p>여기는 부모입니다 : {number}</p> <Child number={number} getData={getData}></Child> </div> ) } export default Parent;
Child.js
import React from 'react' const Child = ({ number, getData }) => { const onClick = () => { console.log(number); getData(number + 1); } return ( <div> <button onClick={onClick}>+</button> </div> ) } export default Child;
'Frontend > React' 카테고리의 다른 글
[50문 50답] 1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? (0) 2022.10.14 [React] 3주차 중간발표 프론트 부분 정리 해둔 것 (0) 2022.09.14 [React] UI/UX란? (0) 2022.09.09 [React] promise, async await (0) 2022.09.06