[React/리액트] 간단 Todo List 예제 | Component, Props

 

 

 

리액트 컴포넌트

리액트에서 컴포넌트는 UI의 독립적인 부분을 의미한다.

각 컴포넌트는 자체적인 상태(state)와 프로퍼티(props)를 가지며, 이를 조합하여 복잡한 UI를 구축할 수 있다.

컴포넌트는 재사용성과 유지보수성을 높이는 데 큰 역할을 한다.

 

Props

Props(프로퍼티)는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방법이다.

Props는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없다.

이를 통해 부모 컴포넌트의 상태를 자식 컴포넌트로 전달하여 동적인 데이터를 효과적으로 관리할 수 있다.

 

 

 

---

간단 Todo List 

const Title = function(props){
  return (
    <div>
      <h1>{props.title}</h1>
      <hr />
    </div>
  );
}

 

위 코드에서 Title 컴포넌트는 부모 컴포넌트로부터 받은 props.title 값을 표시한다.

props는 컴포넌트에 전달된 속성을 담고 있는 객체이다.

 

 

 

const TodoList = function(props){
  const studyList = props.todos.map(function(item){
    return (
      <li key={item.id}>{item.todo} - {item.done ? '완료' : '진행중'}</li>
    );
  });
  return (
    <ul>
      {studyList}
    </ul>
  );
}

 

TodoList 컴포넌트는 부모 컴포넌트로부터 전달받은 props.todos 배열을 기반으로 할 일 목록을 표시한다.

 

반응형

 

<li key={item.id}>{item.todo} - {item.done ? '완료' : '진행중'}</li>

 

• 할 일 목록 배열을 순회하며 각 항목을 <li> 태그로 생성한다.
• key 속성은 React에서 배열 내부 요소들을 식별하기 위해 사용된다.
• 각 항목의 todo와 done 값을 표시한다.
• 삼항 연산자를 이용하여 done 상태에 따라 '완료' 또는 '진행중'을 표시한다.

 

 

    const App = function(){
      const title = 'Simple Todo List - React Props :)';
      let list = [
        { id: 1, todo: 'React 공부', done: false},
        { id: 2, todo: 'Nodejs 공부', done: true},
        { id: 3, todo: 'Javascript 공부', done: true}
      ];

      return (
        <div>
          <Title title={title} />
          <TodoList todos={list} />
        </div>
      );
    }

 

<Title title={title} />

• Title 컴포넌트를 렌더링한다.
• title이라는 속성을 전달하면서 호출한다.
• 이렇게 함으로써 Title 컴포넌트 내부에서 props.title로 접근이 가능하다.

 

</todolist todos={list} >

• TodoList 컴포넌트를 렌더링한다.
• todos라는 속성을 전달하면서 호출한다.
• 이렇게 함으로써 TodoList 컴포넌트 내부에서 props.todos로 접근이 가능하다.

 

 

const root = ReactDOM.createRoot(document.getElementById('app'));
    root.render(<App />);

▶ root는 리액트에서 가장 상위에 위치하는 컴포넌트를 나타내는 개념이다. 리액트는 컴포넌트 트리 구조로 구성되며, 이 트리의 가장 꼭대기에 위치하는 컴포넌트를 "루트 컴포넌트"라고 한다. 이 루트 컴포넌트는 애플리케이션의 전체적인 구조와 동작을 정의하며, 하위에 다양한 하위 컴포넌트들을 포함할 수 있다.