React(34) 리액트 훅 - 부모가 자식에게 props 전달하기

 

 

사람이 커뮤니케이션을 할 때, 정보를 말이나 문자로 주고 받는다. 그 정보를 바탕으로 행동을 하여 결과를 만든다.

컴퓨터로 커뮤니케이션을 할 때도 마찬가지이다. 정보를 컴퓨터 언어로 데이터 형태로 넘기고 받는다. 그리고 결과를 다양한 방식으로 출력한다.

그래서 내가 느낀 소프트웨어 프로그래밍의 핵심은 데이터를 어떻게 가공해서 전달하느냐 인 것 같다. 프로그램을 만들다 보면 느끼겠지만 데이터를 넘기고 받는 과정이 항상 필요하다. 그래서 정보처리기사 자격증 자체도 '정보처리' 라는 단어를 쓰는 것이 아닐까 싶다. 

 

 

---

React(33) 리액트 훅 - 부모가 자식에게 props 데이터 전달하기

리액트에서도 마찬가지이다. 데이터를 부모컴포넌트에게서 물려받는 방법을 알아보자.

준비물은 props 라는 속성이다.

 

부모컴포넌트 App.js 

자식컴포넌트 안에 각각 다른 데이터를 심어주었다. 이처럼 컴포넌트화 시키면 재사용이 가능하다.

import './App.css';
import Hello from './component/Hello'; // 자식컴포넌트 임포트 

function App() {
  return (
    <div className="App">
      <h1>props:properties</h1>	        // 자식컴포넌트를 세번 재사용 
      <Hello age={10} name={"Mike"} />  // age와 name이라는 props를 넣어주고 값을 넣어준다.
      <Hello age={20} name={"Julia"} />
      <Hello age={30} name={"Tom"} />
    </div>
  );
} 
export default App;

 

자식 컴포넌트 Hello.js

function 거대함수 안에 (props 라는 객체를) 받는다. 부모가 보낸 데이터 몽땅 객체로 들어간다. 

버튼을 클릭하면 changeName() 이 실행되고 setName() 과 setAge () 이 실행되며 데이터가 출력된다.

 

import {useState} from "react";

export default function Hello(props) { // 부모가 보낸 데이터를 객체로 묶어 props 안에 담는다.

  const [name, setName] = useState(props.name); // props 안에 name 데이터를 꺼내 정의 
  const [age, setAge] = useState(props.age);	// props 안에 age 데이터를 꺼내 정의
  const msg = age > 19 ? "성인입니다." : "미성년자입니다."

  function changeName() { 
    setName(name); // 부모의 <Hello age={10} name={"Mike"} /> 받아온 name={"Mike"} 을 사용한다.
    setAge(age + 1); // 부모의 <Hello age={10} name={"Mike"} /> 받아온 age={10} 을 사용한다.
  }
  return (
    <div>
      <h2>
        {name} ({age}세) : {msg}	// 부모님께 받아와 changeName()으로 가공한 데이터가 출력된다.
      </h2>
      <button onClick={changeName}>Change</button>
    </div>
  );
}

 

실행화면

change 라는 버튼을 누르면 나이가 바뀌면서 성인인지 미성년자인지를 나타내는 메시지가 출력된다.

 

 

---

MORE DETAILS 

여기서부터는 더 디테일한 설명을 정리한 섹션이다. 

 

1. Hello 라는 자식컴포넌트를 총 3개를 넣어주었다.

자식에게 데이터를 보내주려고 하면 컴포넌트 태그 안에 props 라는 속성을 넣어주고 값을 { } 안에 넣어주면 된다.

그럼 자식 컴포넌트 내에서 {age} 나 {name} 을 호출하면 방금 저안에 있던 10 이나 Mike 같은 값이 출력된다.

// 부모컴포넌트 App.js
<Hello age={10} name={"Mike"} />  // age와 name이라는 props를 넣어주고 값을 넣어준다.
<Hello age={20} name={"Julia"} />
<Hello age={30} name={"Tom"} />

 

2. 자식컴포넌트의 거대함수에서 props 를 인자로 받는다. props 는 부모 데이터를 한바구니에 담은 객체다. 

이름은 props 가 아니라 아무거나 지어도 상관없다.

// 자식컴포넌트 Hello.js
export default function Hello(props) {
  console.log(props)
}

 

console.log 로 찍어본 props 이다. 부모에게서 받아온 각 컴포넌트 별 정보가 모두 들어있다. 

 

3. useState 를 통해 자식컴포넌트 내에서 사용할 name 과 age 라는 변수를 설정한다.

(이벤트나 함수가 실행되면서 변수 값도 바뀌기 때문에 상태변수라고도 한다.)

이때, props.name 으로 부모에게 받아온 데이터를 name 과 age 의 초기 값으로 넣어준다.

  // 자식컴포넌트 Hello.js 
  const [name, setName] = useState(props.name); // props 안에 name 데이터를 꺼내 정의 
  const [age, setAge] = useState(props.age);	// props 안에 age 데이터를 꺼내 정의

 

4. <button> 을 클릭하면 아래 함수가 실행된다.

setName() 이나 setAge() 는 변수 값을 변경할 때 사용되는 함수다. 처음에는 이 개념이 잘 이해가 가지 않았다. 

별다른 기능없이 변수 값만을 변경하거나 그대로 사용하려면 set____ () 이란 이름으로 사용한다.

function changeName() { 
    setName(name); // 부모의 <Hello age={10} name={"Mike"} /> 받아온 name={"Mike"} 을 사용한다.
    setAge(age + 1); // 부모의 <Hello age={10} name={"Mike"} /> 받아온 age={10} 을 사용한다.
}

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists