React props 컴포넌트(함수)간 state 전달하는법

아래와 같은 상황처럼 한 컴포넌트 안에서 만든 state를 다른 컴포넌트에서 쓰고싶은 경우가 있다.

주로 한 컴포넌트 안에 있는 다른 컴포넌트에 변수를 전달해줄 때가 많다.

function App() {
  let [list1, setList1] = useState([1,2,3]);
  return(
    <Modal></Modal>
  );
}

function Modal(){
  return(
    <div>{list1[0]}</div>
  );
}

하지만 위와 같이 코딩하면 해당 코드는 작동하지 않는다.

JavaScript 특성상 한 함수 안에서 선언된 (지역)변수는 다른 함수에서 사용할 수 없기 때문이다.

 

따라서 이것을 해결하기 위해 React에는 props라는 문법이 존재한다.

 

Component 태그 안에 변수명={변수자료}와 같이 속성을 주면 이 자료들은 컴포넌트를 선언할 때 파라미터에 작성한 props 안에 들어가게 된다.

 

따라서 아래와 같이 사용한다.

function App() {
  let [list1, setList1] = useState([1,2,3]);
  return(
    <Modal list1={list1}></Modal>
  );
}

function Modal(props){
  return(
    <div>{props.list1[0]}</div>
  );
}

이와같이 작성하면 정상적으로 작동하는 모습을 볼 수 있다.