[React] 입문 - Props로 데이터 전달하기

Props로 데이터 전달하기

Props란? 컴포넌트에 값 전달하기

부모 컴포넌트가 자식 컴포넌트 들에게 마치 함수의 인수를 전달하듯 원하는 값을 전달해주는게 가능하다.

이렇게 전달된 값을 props라고 한다. 

 

props를 이용하면 좋은점

props를 이용하면 컴포넌트를 마치 함수를 호출하듯이 전달하는 값에 따라서 각각 다른 UI를 렌더링하도록 만들 수 있다.

전달받은  props의 값을 활용하는 방법

props라는 매개변수에 객체 형태로 값이 저장되어있음으로 점 표기법을 사용해 props.text를 렌더링하도록 설정하면 버튼 안에 각각의 렌더링된다. 

 

그렇다면 컬러의 값도 활용하려면 어떻게 해야할까? 

버튼의 style을 color는 props의 color라고 설정해주면 된다. 

버튼이 빨간색으로 렌더링된것을 확인할 수 있다.

 

 {props.text}-{props.color} 이렇게 입력하면 버튼의 텍스트와 색상이 함께 렌더링되는 것을 확인할 수 있다.

카페와 블로그는 props로 전달을 안했기때문에 컬러값이 없어서 dash만 렌더링되었다. 

 

props로 color라는 값이 무조건 들어올거라고 예상하고 위의 처럼 코드를 작성하면 치명적인 오류가 발생한다. 

왜냐하면 카페와 블로그에는 props로 전달된 값이 없기때문이다. 

 

그렇다면 어떻게 하면 좋을까? 

구조분해할당 방법을 사용하면 된다. 

 

컬러 props의 기본값이 잘 들어갔다. 

 

즉, props의 기본 값을 설정하고 싶을때는 

props를 구조분해할당 문법으로 받아오도록 변경한 다음 이때 구조분해 할당 문법에서 기본 값 문법을 잉요해 props의 기본 값 설정을 해주면 된다.

 

props를 전달하는 부모 컴포넌트 측에서

만약에 텍스트나 컬러 말고 

function App() {
  return (
    <>
      <div>
        {/* 컬러 props를 추가하면 test: 메일, color:"red"로 큰솔에 출력된다. */}
        <Button text={'메일'} color={'red'} a={1} b={1} c={3} />
        <Button text={'카페'} />
        <Button text={'블로그'} />
      </div>
    </>
  );
}

export default App;

color={'red'} a={1} b={1} c={3} 이런식으로 다양한 값들이 props로 전달해야될 때는 어떻게 해야될까?

 

이 때는 하나의 객체로 묶어서 spread연산자를 통해 한방에 전달되도록 만든다. 

특정 객체에 props로 전달해야된느 값들이 보관되어 있는 상황이면 객체의 값을 하나하나 적을 필요 없다!

spread연산자를 이용하자!

 

일반적인 자바스크립트 값 뿐만 아니라 html요소나 React 컴포넌트도 전달할 수 있다. 🤩

구조분해 할당 문법에서 children이라는 이름으로 div태그를 받아올 수 있게된다.

자식요소로 배치한 div태그가 children props로 제공된다. 렌더링된것도 확인 가능하다!

header 컴포넌트도 렌더링 가능!