(react) 컴포넌트 만들기 2

유니크한 <Todo /> 만들기

props를 이용해서 컴포넌트의 일부만 변경해줄 수 있는데, App.jsx에서 <Todo />의 name 속성에 각각 prop을 지정함.

<Todo name="Eat" />
<Todo name="Sleep" />
<Todo name="Repeat" />

 

 

다시 Todo.jsx로 가서 아래와 같이 Todo함수를 수정해줌.

function Todo(props) {
  return (
    <li className="todo stack-small">
      <div className="c-cb">
        <input id="todo-0" type="checkbox" defaultChecked={true} />
        <label className="todo-label" htmlFor="todo-0">
          {props.name}
        </label>
      </div>
      <div className="btn-group">
        <button type="button" className="btn">
          Edit <span className="visually-hidden">{props.name}</span>
        </button>
        <button type="button" className="btn btn__danger">
          Delete <span className="visually-hidden">{props.name}</span>
        </button>
      </div>
    </li>
  );
}

export default Todo;

 

 

 

코드를 작성하고 나면 위의 캡쳐같이 모든 checkbox가 선택된 상태로 나오게 된다. App.jsx에서 다시 <Todo />에 completed라는 새로운 prop과 각각 id를 지정해줘보자~

<Todo name="Eat" completed={true} id="todo-0" />
<Todo name="Sleep" completed={false} id="todo-1" />
<Todo name="Repeat" completed={false} id="todo-2" />

 

그리고 Todo.jsx로 가서 <input />요소의 id속성 값과 레이블의 htmlFor속성 값을 바꿔주게 되면, 

아래 캡쳐와 같이 나오게 됨~~

<div className="c-cb">
  <input id={props.id} type="checkbox" defaultChecked={props.completed} />
  <label className="todo-label" htmlFor={props.id}>
    {props.name}
  </label>
</div>

 

 

 

 

React에서 props란?

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되는 특별한 형태의 객체.

함수의 인자처럼 생각할 수 있으며, 컴포넌트가 어떻게 렌더링될지를 결정하는 역할을 함.

• props 전달: JSX 태그의 속성으로 props를 전달
• props 접근: 자식 컴포넌트 내에서 this.props를 통해 props에 접근
• props의 변경: props는 불변(immutable)하기 때문에 직접 변경은 할 수 없기 때문에 상태(state)를 사용하여 값을 변경하고, 다시 props로 전달해야 함.

 

 

props를 사용하는 이유는?

• 동일한 컴포넌트를 다양한 데이터로 활용하여 코드의 재사용성을 높임
• 컴포넌트 간의 데이터 흐름을 명확하게 관리하여 코드의 복잡도 줄임
• 컴포넌트 간의 의존성을 줄여줌