🔫 React_02 props

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

🎲 props의 기본 사용법

• App 컴포넌트에서 Hello 컴포넌트를 사용
• name이라는 값을 전달

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

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

export default App;

• Hello 컴포넌트에서 name값을 사용하고 싶을 때,

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

function Hello(props) {
  return <div>Hey, {props.name}</div>;
}

export default Hello;

• 컴포넌트에게 전달되는 props는 피라미터를 통해 조회
• props는 객체 형태로 전달
  • name 값을 조회하고 싶다면 props.name으로 조회

🎲 여러 개의 props, 비구조화 할당

• Hello 컴포넌트에 color라는 값을 props로 추가 전달

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

function App() {
  return (
    <div className="App">
      <Hello name="bori" color="#999" />
    </div>
  );
}

export default App;

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

function Hello(props) {
  return <div style={{ color: props.color }}>Hey, {props.name}</div>;
}

export default Hello;

• props 내부 값을 조회할 때마다 props.를 붙임
  => 비구조화 할당(또는 구조 분해)문법을 사용해 코드 간결화

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

function Hello({ name, color }) {
  return <div style={{ color: color }}>Hey, {name}</div>;
}

export default Hello;

🎲 defaultProps로 기본값 설정

• defaultProps 값을 설정
  => 컴포넌트에 props를 지정하지 않았을 때 사용할 값을 설정

import React from "react";

function Hello({ name, color }) {
  return <div style={{ color: color }}>Hey {name}</div>;
}

Hello.defaultProps = {
  name: "이름 없음",
};

export default Hello;

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

function App() {
  return (
    <div className="App">
      <Hello name="bori" color="#999" />
      <Hello color="#333" />
    </div>
  );
}

export default App;

🎲 props.childred

• props.childred 조회 : 컴포넌트 태그 사이에 넣은 값을 조회
• src폴더에 Wrapper 컴포넌트 생성
  => Wrapper 태그 내부에 Hello 컴포넌트 넣기
  => Wrapper 컴포넌트를 App 컴포넌트에서 사용하기
• Wrapper의 내부 내용이 보여지려면 props.children을 렌더링 해준다.
  => props.children가 없으면 Hello 컴포넌트들이 보이지 않는다.

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

function Wrapper({ children }) {
  const style = {
    border: "2px solid #333",
    padding: "15px",
  };

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

export default Wrapper;

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

function App() {
  return (
    <Wrapper>
      <Hello name="bori" color="#999" />
      <Hello color="#333" />
    </Wrapper>
  );
}

export default App;

🎲 조건부 렌더링

• 특정 조건에 따라 다른 결과물을 렌더링 하는 것
• App 컴포넌트에서 Hello 컴포넌트를 사용할 때. isSpecial이라는 props를 설정
  => Hello 컴포넌트에서 isSpecial이 ture이냐 false이냐에 따라 컴포넌트의 좌측에 *표시 여부

// App.js
function App() {
  return (
    <Wrapper>
      <Hello name="bori" color="#999" isSpecial={true} />
      <Hello color="#333" />
    </Wrapper>
  );
}

// Hello.js
// 삼항연산자 사용
function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial ? <b>*</b> : null}
      Hey {name}
    </div>
  );
}

• 단순히 특정 조건이 true면 보여주고, 그렇지 않으면 숨기는 경우
  => &&연산자 사용
  {isSpecial ? <b>*</b> : null} => {isSpecial && <b>*</b>}

단축평가(short-circuit evaluation) 논리 계산법

true && true; // true
true && false; // false
true || false; // ture
false || true; // trus
false || false; // 뒤에 false가 출력

• A && B : A가 Truthy한 값이라면 B가 결과값이 되고, A가 Falsy한 값이라면 결과는 A가 된다.
• A || B : A가 Truthy한 값이라면 A가 결과값, A가 Falsy한 값이라면 결과는 B

🎲 props 값 설정 생략 = {true}

• 컴포넌트의 props 값을 설정할 때, props 이름만 작성하고 값을 생략한다면, true로 설정한 것으로 간주
  isSpecial = isSpecial={true}

참고

• 벨로퍼트와 함께하는 모던 리액트