[React] props / 조건부 렌더링

props를 통해 컴포넌트에게 값 전달하기

props는 propreties의 줄임말입니다.

 

주로 부모 컴포넌트에서 자식 컴포넌트로 특정 값을 전달할 때 사용합니다. 

 

 

App.js (부모)

import React from "react";
import Hello from "./Hello";

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

export default App;

 

Hello.js (자식)

import React from "react";

function Hello() {
  return 
    <div>안녕하세요! </div>
}
export default Hello;

초기 구성 코드입니다.

화면에는 "안녕하세요!" 가 렌더링 될 것입니다.

부모 컴포넌트는 App.js이고 자식 컴포넌트는 Hello.js입니다.

 

---

부모 컴포넌트에서 자식 컴포넌트로 name과 color 값을 전달해주려면 어떻게 해야될까요?

 

App.js

import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <>
      <Hello name="react" color="red" />;
    </>
  );
}

export default App;

 

Hello.js

import React from "react";

function Hello(props) {
    console.log(props); // props 객체를 출력한다. 넘겨받은 name: "react", colo: "red" 출력.
  return (
    <div
      style={{
        color: props.color,
      }}
    >
      안녕하세요! {props.name}
    </div>
  );
}

export default Hello;

이렇게 하면 화면에는 "안녕하세요! react"가 빨간색 글씨로 렌더링 됩니다.

 

* 참고로 style에 중괄호를 두 개 묶어준 이유는 자바스크립트 값이라 겉에 중괄호로 한번 묶어주고

그 안에는 객체를 구성할 거라 중괄호로 또 묶어준 것입니다.

 

---

비구조화 할당(구조 분해) 문법을 사용해서 더 간편하게 작성해보겠습니다.

 

Hello.js

import React from "react";

function Hello({color, name}) {

  return (
    <div
      style={{
        color,
      }}
    >
      안녕하세요! {name}
    </div>
  );
}

export default Hello;

props 객체를 구조 분해 문법을 통해 color, name으로 값을 넘겨받았습니다. 중괄호로 묶어주는 것도 기억하면 좋습니다.

 

style = {{ color, }} 는 color = color와 같습니다.

 

---

Props에서 값을 지정하지 않았을 때 기본적으로 사용할 값을 설정하는 방법을 알아보겠습니다.

 

 

Hello.js

import React from "react";

function Hello({ color, name }) {
  
  return (
    <div
      style={{
        color: color,
      }}
    >
      안녕하세요! {name}
    </div>
  );
}

Hello.defaultProps = {
  name : '이름없음'
}
export default Hello;

이렇게 Hello.js에 Hello.defaultProps를 구성하고

부모 컴포넌트인 App.js에서 color="pink" 값만 가지고 name 값은 없는 Hello 컴포넌트를 호출해보겠습니다.

 

 

App.js

import React from "react";
import Hello from "./Hello";

function App() {
  return (
    
    <>
      <Hello name="react" color="red" />;
      <Hello color="pink" />
    </>
  );
}

export default App;

화면에는 이렇게 렌더링 될 것입니다.

---

Props.Children을 알아보겠습니다.

 

Props.Children은 어떤 태그가 있을 때 태그가 div, input이런 것이 아닌 어떤 컴포넌트일 때

예를 들어<Wrapper>blabla</Wrapper>이런 값이 있을 때

안에 있는 blabla를 조회하기 위해서 사용하는 것이 Props.Children입니다.

 

Wrapper 컴포넌트를 하나 만들겠습니다. 

 

Wrapper.js

import React from "react";

function Wrapper() {
  const style = {
    border: "2px solid black",
    padding: 16,
  };

  return <div style={style}></div>;
}

export default Wrapper;

부모 컴포넌트인 App.js에서 Wrapper.js를 불러오겠습니다. 

 

App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" />
      <Hello color="pink" />
    </Wrapper>
  );
}
export default App;

이런 식으로 화면에 렌더링 될 것입니다.

하지만 이렇게 하면 <Wrapper>안에 있는 <Hello> 컴포넌트들이 보이지 않게 됩니다.

 

이들을 보이게 해주는 것이 Props.Children입니다.

 

Wrapper.js

import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: 16,
  };

  return <div style={style}>{children}</div>;
}

export default Wrapper;

App.js에서 <Wrapper>로 감싸준 컴포넌트들을 {children}으로 컴포넌트를 받아 올 수 있습니다.

이들을 return할 때 같이 불러오는 것입니다.

 이쁘게 출력이 잘 됐습니다. 

 

 

정리하자면,

 

App.js 부모 컴포넌트에서 자식 컴포넌트 안에 값을 넘겨준 name과 color 가 Props입니다.

 

자식 컴포넌트인 Hello.js에서는 이 Prop값을 {}로 감싼 비구조화 할당 혹은 Props를 파라미터로 받아와서 사용할 수 있습니다.

 

기본값은 defaultProps를 사용하면 되고 {children} props는 태그 사이의 내용을 나타내는 것입니다.

 

 

 

조건부 렌더링 

코드는 위의 코드에서 이어갑니다. 

 

조건부 렌더링을 구현하는 가장 기본적인 방법은 삼항 연산자를 사용하는 것입니다.

 

App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true} />
      <Hello color="pink" />
    </Wrapper>
  );
}

export default App;

 

Hello.js

import React from "react";

function Hello({ color, name, isSpecial }) {
  
  return (
    <div style={{
        color,
      }}>
      {isSpecial ? <b>*</b> : null}
      안녕하세요! {name}
    </div>
  );
}

Hello.defaultProps = {
  name : '이름없음'
}
export default Hello;

결과 화면입니다.

* 참고로 jsx에서 {null}, {false}, {undefined}를 렌더링 하면 아무것도 안나타납니다.

하지만 falsy한 값인 {0}만 0을 렌더링합니다.

 

보통 삼항 연산자는 내용이 달라질 때 사용하는 것이 유용합니다.

하지만 위와 같은 숨기거나 보여주거나 하는 기능에서는 삼항 연산자보다

&&연산자를 사용하는 것이 더 간편합니다.

 

 

Hello.js

import React from "react";

function Hello({ color, name, isSpecial }) {
  
  return (
    <div style={{
        color,
      }}>
      {isSpecial && <b>*</b>}
      안녕하세요! {name}
    </div>
  );
}

Hello.defaultProps = {
  name : '이름없음'
}
export default Hello;

&&연산자는 false일 때, 아무 값을 렌더링하지 않습니다. 

true일 때는 뒤 쪽에 있는 값을 렌더링합니다. 

 

 

추가 팁.

만약 부모 컴포넌트인 App.js에서 isSpecial 값을 true로 설정하지 않은 상태여도 기본 값은 true이기 때문에 true를 반환합니다.

 

 

App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial/>
      <Hello color="pink" />
    </Wrapper>
  );
}

export default App;

 

위의 결과 화면과 동일한 화면을 렌더링 합니다.