[리액트] props 쉽게 쓰고 싶으면

참고한 글

리액트에서 탭 UI 만들기 (tistory.com)

리액트에서 탭 UI 만들기

하단에 있음.

---

객체 비구조화 할당(object destructuring)을 통해
props를 간단하게 받아오려는 것

 

비구조화 할당

import React from "react";
import "./style/main.scss"; // 스타일이 있는 경로에 따라 맞춰주세요.

function Search({ isVisible, setSearch }) {
  if (!isVisible) return null;

  return (
    <div className="search-container">
      <div
        className="search-overlay"
        onClick={() => setSearch(false)}
      ></div>
      <div className="search">
        <input
          type="text"
          className="search-box"
          placeholder="Press Enter to Search"
        />
      </div>
    </div>
  );
}

export default Search;

이렇게 props 를 안쓰고 받아올 수 있다.

비구조화 할당을 사용하면 더 간결하게 변수에 바로 접근할 수 있어
코드가 짧아지고 읽기 쉬워집니다.

이런 방식은 비구조화 할당 또는 구조 분해 할당(destructuring assignment)이라고 불리며,
자바스크립트의 ES6 문법 중 하나입니다.

props 사용

function Search(props) {
  if (!props.isVisible) return null;

  return (
    <div className="search-container">
      <div
        className="search-overlay"
        onClick={() => props.setSearch(false)}
      ></div>
      <div className="search">
        <input
          type="text"
          className="search-box"
          placeholder="Press Enter to Search"
        />
      </div>
    </div>
  );
}

---

좀 더 간단한 예시 코드

 

props 사용

// 1. props를 그대로 사용하는 경우
function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

비구조화 할당

// 2. 비구조화 할당을 사용하는 경우
function Welcome({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

props 대신에 필요한 state나 props의 이름만 써주면 됨.

 

객체 비구조화 할당을 통해,

props나 state의 특정 값들만 직접 꺼내서 사용할 수 있는 것

function Welcome({ name, age }) {
  return (
    <div>
      <h1>안녕하세요, {name}님!</h1>
      <p>나이: {age}세</p>
    </div>
  );
}

얘도 컴포넌트를 사용할 때,

props를 넘겨줄 때와 동일하게 이름을 지정해줘야 함.