React 기본, props 사용하기

👾 props란?

 • props는 컴포넌트의 속성을 의미한다. props는 변하지 않는 immutable한 데이터이다.

 • props는 부모 컨포넌트에서 자식 컨포넌트로 또는 구성 요소 자체에서 데이터를 전달하는데 사용된다. 즉, 어떤 값을 컴포넌트에게 전달해줘야 할 때 사용한다.

 • React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.

 • props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.

 • props는 외부로부터 전달받아 변하지 않는 값으로 읽기 전용(read-only)이다.

읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 이는 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배된다.

즉, 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수(입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수)처럼 동작해야 한다.

 

 

👾 props 사용하는법 (기본)

 props를 사용해 전체 속성을 가져올 수도 있고, {중괄호 내부에 속성 이름을 지정해} 원하는 속성값만 사용할 수도 있다.

 

 1. props로 전체 속성 가져오기

// Parent 컴포넌트 (실제 화면에 render되는 상위 component)
function Parent() {
  return (
    <Child title="WEB" sub="welcome to the world wide web" />
    // 1. 속성 지정
  );
};

// Child 컴포넌트
function Child(props) { // 2. props 가져오기

  console.log(props) 
  /* 
    props는 객체의 형태를 가진다. 
    {title: 'WEB', sub: 'welcome to the world wide web'}
  */
  
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.sub}</p>
    </div>
    // 3. {} 안에 사용하려는 속성 작성
  );
};

 

 2. 원하는 속성만 가져오는 방법 { … }

// Parent 컴포넌트 (실제 화면에 render되는 상위 component)
function Parent() {
  return (
    <Child title="WEB" sub="welcome to the world wide web" />
    // 1. 속성 지정
  );
};

// Child 컴포넌트
function Child({ title, sub }) { // 2. 원하는 속성만 가져오는 방법 {}

  console.log(title, sub) 
  // WEB, welcome to the world wide web
  
  return (
    <div>
      <h1>{title}</h1>
      <p>{sub}</p>
    </div>
    // 3. {} 안에 사용하려는 속성 작성
  );
};

 

 

 

👾 props.children

 props.children은 컴포넌트가 여는 태그와 닫는 태그로 이루어져 있는 경우 태그의 value를 가져온다.

 props.children를 사용하면 컴포넌트 자체를 props로 전달할 수도 있다.

 

 👩🏻‍💻 example 1

function Parent() {
  return (
    <Child title="sayHi">Hi, React!</Child> 
  );
};

function Child(props) {

  console.log(props) // {title: 'sayHi', children: 'Hi, React!'}

  return (
    <div>{props.children}</div> // Hi, React! 출력
  );
};

 ↑ 위 코드는 props로 전체 속성을 가져오고, 아래 코드는 {children}으로 컴포넌트의 value를 가져온다.

 결과적으로는 두 코드는 같은 내용을 보여준다. (Hi, React! 출력) ↓

function Parent() {
  return (
    <Child title="sayHi">Hi, React!</Child> 
  );
};

function Child({ children }) {

  console.log(children) // Hi, React!

  return (
    <div>{children}</div> // Hi, React! 출력
  );
};

 

 👩🏻‍💻 example 2

function Parent() {
  const apple = "🍎";
  const orange = "🍊";

  return (
    <Child>{apple}{orange}</Child> 
  );
};

function Child(props) {
  console.log(props.children) // ['🍎', '🍊']
  return (
    <div>{props.children}</div> 
  );
};

 

 

👾 props로 동적으로 리스트 생성하기 (key)

// App component (실제 화면에 render되는 component)
function App() {
  const topics = [
    { id:1, title:'html', body: 'html is...' },
    { id:2, title:'css', body: 'css is...' },
    { id:3, title:'js', body: 'js is...' },
  ]

  return (
      <Nav topics={topics}></Nav>
  )
}

// Nav component
function Nav(props) {
  console.log(props) // props로 App 컴포넌트의 topics 배열을 받는다. 

  /* for문 사용
  const list = []
  for(let i=0; i<props.topics.length; i++) {
    let j = props.topics[i];
    list.push( <li key={j.id}><a href={`/${j.id}`}>{j.title}</a></li> )
  }
  */

  // map사용
  const list = props.topics.map((value) => {
    return <li key={value.id}><a href={`/${value.id}`}>{value.title}</a></li>
  });

  return(
    <nav>
      <ol>
        {list}
      </ol>
    </nav>
  )
}

 

• list와 key

 list에 key를 입력해주지 않으면 리스트 각 항목에 key를 넣어야 한다는 경고가 표시된다. (Warning: Each child in a list should have a unique "key" prop.)

 

 key는 엘리먼트의 배열을 만들 때 포함해야 하는 특별한 문자열으로 React가 어떤 항목을 변경, 추가 혹은 삭제할지 식별하는 것을 돕는다. 엘리먼트들을 안정적으로 식별할 수 있도록 배열 내의 엘리먼트에 key를 제공해야 한다.

 key는 같은 배열에 포함된 다른 요소 사이에서만 고유한 값을 가지면 된다. (전체 애플리케이션 또는 단일 컴포넌트 전체에서 고윳값을 가질 필요는 없다.)

 

 Math.random() 같은 값을 key로 사용하면 안된다. React가 항목 추가, 제거 또는 다시 정렬할 시기를 결정할 수 있도록 key는 다시 렌더링하는 과정 동안 “안정적으로 식별 가능”해야 합니다. 이상적으로, Key는 id와 같이 데이터에서 사용되는 유일하고 안정적인 식별자를 사용하는 것이 좋다.

 

 

👾 defaultProps

 값이 지정되지 않았을 때, props에 기본값을 주길 원한다면 ① 변수 바로 뒤에 =과 함께 기본값을 넣어 구조 분해 할당을 해주거나, ② 컴포넌트에 defaultProps 값을 설정할 수 있다.

 

 → 기본값은 해당 prop이 없거나 {undefined}로 전달될 때 사용된다.

 → {null} 또는 {0}으로 전달된 경우는 기본값이 사용되지 않는다.

 

 1. 변수 바로 뒤에 = 과 함께 기본값 넣기

function App() {
  return (
    <User name="fay" /> // age prop이 없는 User component
  )
}

function User({ name, age = 20 }) { // age 기본값 지정
  
  console.log(name, age) // fay, 20

  return (
    <div>
      <p>name: {name}</p>
      <p>age: {age}</p>
    </div>
  )
}

 

 2. defaultProps 정의 

function App() {
  return (
    <div>
      <List list={undefined} /> 
      {/* list가 undefined인 경우 */}
    </div>
  )
}

const List = ({ list }) => {

  const items = list.map((items) => {
      return <li key={items.id}></li>
  });

  return (
    <div>
        <h2>리스트</h2>
        <div>
            <p>{list.length}개의 리스트가 있습니다.</p>
            <ul>
                {items}
            </ul>
        </div>
    </div>
  )
}

// List의 defaultProps
List.defaultProps =  {
    list: [],
};

 

 

👾 Props Drilling과 상태관리

React의 Props Drilling과 상태관리

 

 

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊