[React] 부모 자식 컴포넌트의 흐름

부모 컴포넌트 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;