[React 입문] Props

Habin Lee·2023년 11월 2일

내배캠React3기-React 문법

목록 보기

4/13

요약

Props 개념에 대해 설명할 수 있다.
자식 컴포넌트에서 부모에게 받은 값을 렌더링하는 방법을 알 수 있다.
prop drilling에 대해 설명할 수 있다.
props의 주요 개념 중, children에 대해 설명할 수 있다.
children의 용도와 렌더링 방법에 대해 설명할 수 있다.
props를 추출할 수 있다.
defaultProps를 설명할 수 있다.

Props

Props란

컴포넌트 간의 정보교환 방법
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터

props는 반드시 위에서 아래 방향으로 흐른다.
(부모 -> 자식 방향으로만 흐르는 단방향)
props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
props를 통해 부모 -> 자식으로 데이터를 전달할 수 있다.

자식 컴포넌트에서 부모 컴포넌트에게 받은 값을 렌더링하는 방법

예시 1

import React from 'react';

// 아들은 엄마의 이름을 알 수 없다.
// -> 자식에게 부모의 정보를 물려주려면 props를 이용하면 된다.
function Son() {
  return <div>나는 아들입니다.</div>
}

function Mother() {
  const name = '흥부인';
  return <Son />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

예시 2

import React from 'react';

// 자식 컴포넌트의 인풋값으로 props(변수 이름이기 때문에 다른 문자를 넣어도 되지만 일련의 약속으로 props를 넣었다.)를 넣게 되면 부모 컴포넌트의 정보를 받아올 수 있다.
function Son(props) {
  // 데이터를 잘 받아왔는지 보려면 console.log로 찍어보기
  console.log(props.motherName);
  // 중괄호 안에 불러온 부모 컴포넌트의 데이터를 넣어 이렇게 활용할 수 있다.
  return <div>나는 {props.motherName}의 아들입니다.</div>
}

function Mother() {
  const name = '흥부인';
  // motherName 이라는 아무 이름을 지정하여 중괄호{자바스크립트}안에 불러올 변수를 쓴다.
  // 이렇게 쓰면 부모 컴포넌트가 자식 컴포넌트에게 어떤 정보를 전달할 수 있다.
  return <Son motherName={name} />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

예시 3

import React from 'react';
// 3.Mother 부모 컴포넌트로 받아온 grandFatherName을 props로 받아온다.
function Son(props) {
  return <div>나는 {props.gFName}의 손자입니다.</div>
}
// 2.gFName를 변수로 지정하여 그 안에 부모 컴포넌트의 grandFatherName을 지정(props.grandFatherName)하고 Son 자식 컴포넌트에 전달
// ※ GrandFather-Son 의 연결다리처럼 전달만 해주기 위한 컴포넌트가 됨
function Mother(props) {
  const gFName = props.grandFatherName
  return <Son gFName = {gFName} />;
}
// 1.grandFatherName 이라는 아무 이름을 지정하여 중괄호{자바스크립트}안에 불러올 변수를 쓴다.
function GrandFather() {
  const name = '흥할아버지';
  return <Mother grandFatherName = {name}/>;
}

function App() {
  return <GrandFather />;
}

export default App;

Prop Drilling

Mother 컴포넌트 같이 다리역할만 해주는 컴포넌트가 중간에 너무 많이 들어가있을 경우, props가 1-2-3-4-5 순서로 데이터를 전달할 때 1에서 5까지 가려면 2-3-4 컴포넌트를 거쳐야하는데, 아래쪽으로 드릴처럼 내려간다고 하여 이 현상을 prop drilling이라고 한다.
prop drilling의 문제점

깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어렵다.
어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘어저셔 대처를 늦을 수 밖에 없다.
-> 이에 대한 해결법은 React 숙련과정에서 배우도록 하겠다.

Props Children

부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하는 또 다른 방법
열고 닫는 태그를 사용하여 데이터를 전달하는 방법

예시 1

// props 방법 1
import React from 'react';

function App() {
  const name = '상위컴포넌트이름!'
  return <User name = {name} />;
}

function User(props) {
  return <div>{props.name}</div>
}

// props 방법 2
export default App;

import React from 'react';

function App() {
  // 자식 컴포넌트를 열고 닫는 태그를 만들어서 그 안에 부모 데이터를 넣는다.
  return <User>안녕하세요!</User>;
}
// props로 부모 데이터를 받아와서
function User(props) {
  // props 의 children 정보를 {}중괄호 안에 넣어 출력한다.
  return <div>{props.children}</div>;
}

export default App;

예시 2

※ 기존 props방식이 있는데 Children을 쓰는 이유!
항상 같은 형식의 페이지를 구현해야할 때 주로 사용하기 때문

// Layout 컴포넌트
import React from "react";

function Layout(props) {
  return (
    <>
      <header
        style={{
          margin: "10px",
          border: "1px solid red",
        }}>
        항상 출력되는 머릿글입니다.
      </header>
      {props.children}
    </>
  );
}

export default Layout;

// App 컴포넌트
import React from 'react';
import Layout from 'Layout';

function App() {
  return <Layout>
    {/* 이 부분이 children이 됨 */}
    <div>App 컴포넌트에서 보낸 값입니다.</div>
  </Layout>;
}

export default App;

Props 추출

JS 구조분해할당

Props 추출에 대한 것을 공부하기 위해서 JS 에서의 구조분해 할당에 대한 공부가 선행되어야한다.

const testObj = {
name: 'habin',
age: 21,
company: 'sparta'
}

const {name, age, company} = testkObj

props의 구조분해할당

그냥 props만 적어놓으면 어떤 props가 있는 지 명시적으로 알 수 없다.
props를 구조분해할당으로 찢어놓으면 어떤 값이 있는지 직관적으로 알아볼 수 있다.

// App 컴포넌트
import React from 'react';
import Child from 'Child';

function App() {
  const name='test';

  return (
  <Child age={21} name={name}>
    이름
  </Child>
  );
}

export default App;

// Child 컴포넌트 1 - props에 들어있는 값을 객체로 볼 수 있다.
import React from 'react'

function Child({age, name, children}) {
    console.log(age);
  return <div>Child</div>;
}

export default Child;
// {age: 21, name: 'test', children: '이름'}

// Child 컴포넌트 2 - 구조분해할당으로 props를 찢어주면 한눈에 알 수 있다.
import React from 'react'

function Child({age, name, children}) {
    console.log(age);
    console.log(name);
    console.log(children);
  return <div>Child</div>;
}

export default Child;
// 21
// test
// 이름

defaultProps(Default Argument와 비슷)

defaultProps: 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값

Default Argument: 매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하는 것

// App 컴포넌트
import React from 'react';
import Child from 'Child';

function App() {
  const name='test';

  return (
  // 만약 App 컴포넌트에서 age 값을 주지 않고
  <Child name={name}>
    이름
  </Child>
  );
}

export default App;

// Child 컴포넌트
import React from 'react'

function Child({age, name, children}) {
    console.log(age);
    console.log(name);
    console.log(children);
  return <div>Child</div>;
}
// Child에 defaultProps를 '기본 나이'로 설정해두면
Child.defaultProps={
  age: '기본 나이'
}

export default Child;

// console값은 아래와 같이 나온다.
// 기본 나이 - App 컴포넌트에서 정해진 age 값이 없으므로 defaultProps 가 작동하여 '기본 나이' 가 age 값으로 나온게 된다.
// test
// 이름