Props

SebellKO·2023년 10월 2일

React

목록 보기

4/15

props란

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는데 사용되는 매개변수이다.
props를 이용해 부모 컴포넌트는 자식 컴포넌트에게 정보를 전달하고, 자식 컴포넌트는 전달받은 데이터를 이용한다.

props의 특징

읽기전용 : 부모로 부터 전달받은 props는 읽기전용으로 자식 컴포넌트는 해당 값을 수정할 수 없다.
데이터흐름 : 부모 컴포넌트는 자식 컴포넌트에게 props를 전달함으로서 부모와 자식 간의 데이터 흐름을 구성할 수 있다.
전달방법 : 함수형 컴포넌트에서 props는 매개변수처럼 사용되며, 클래스형 컴포넌트에서는 this.props를 통해 접근할 수 있다.

Parent -> Child


import './App.css';
import ToDoForm from './components/ToDoForm/ToDoForm';
import ToDoList from './components/ToDoList/ToDoList';

function App() {
  const todoList = [
    {title: 'Clean my room', id: 1},
    {title: 'Study English', id:2}
  ]

  return (
    <div className="App">
      <ToDoForm></ToDoForm>
      <ToDoList todoList={todoList}></ToDoList>
    </div>
  );
}

export default App;

위 코드를 보면 todoList 배열을 ToDoList 컴포넌트에 todoList라는 이름으로 props로 전달하고 있다. todoList 배열안 객체는 각각 id 값을 가지고 있다. 이 id값은 각 요소의 key 값으로 사용된다.

const ToDoList = (props) => {
  return (
    <div>
      <ul>
        {props.todoList.map((list) => {
          return (
            <li>
              <span>{list.title}.</span>
              <button type="button">X</button>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default ToDoList;

전달받은 props는 함수의 매개변수 형태로 접근할 수 있으며, 배열을 받았기 때문에 map 함수를 사용해 배열의 모든 인덱스들을 출력한다.

Child -> Parent

현재 상태는 부모 컴포넌트로부터 전달받은 값들만 출력하고 있으니 ToDoForm 컴포넌트에서 전달받은 값을 출력해보자.

자식에서 부모로 값을 넘기는 방법은 함수를 이용하는 것이다.


import './App.css';
import ToDoForm from './components/ToDoForm/ToDoForm';
import ToDoList from './components/ToDoList/ToDoList';

function App() {
  const todoList = [
    {title: 'Clean my room', id: 1},
    {title: 'Study English', id:2}
  ]
  const getToDo = (todo) => {
    todoList.push(todo);
    console.log(todoList);
  }

  return (
    <div className="App">
      <ToDoForm onGetTodo={getToDo}></ToDoForm>
      <ToDoList todoList={todoList}></ToDoList>
    </div>
  );
}

export default App;

부모 컴포넌트인 App.js에서 getToDo함수를 선언해 ToDoForm 컴포넌트로 props로 전달한다.

const ToDoForm = (props) => {

    const submitHandler = (event) => {
        const title = document.querySelector('#todoInput').value;
        event.preventDefault();
        const todo = {title: title, id: Math.random()};
        props.onGetTodo(todo);
    }
  return (
    <div>
      <form onSubmit={submitHandler}>
          <label htmlFor='todoInput'>Type your To Do.</label>
          <input id='todoInput' type='text'></input>
          <button type='submit'>Add</button>
      </form>
    </div>
  );
};

export default ToDoForm;