[React.js] Props

props는 컴포넌트에 데이터를 전달하는 방법이다.

App 컴포넌트에서 counter컴포넌트로 데이터를 전달하고 이를 사용해보자.

 

prop 전달하기

이렇게 객체 안에 전달 할 값을 넣어준다.(<객체명 prop명 = {값}/>)

 

그럼 counter.js에서는 이런식으로 매개변수로 값을 받아서 사용하면 된다.

prop는 여러개를 해도 되는데 이럴 때는 점표기법을 사용한다.(props.initialValue)

 

위와 같이 여러개의 prop를 전달할 때에는 가독성이 떨어진다. 

그래서 이런 식으로 spread를 사용해서 전달한다.

 

이때 counter.js에서 위와 같이 매개변수를 설정하면 props에서 a만 받겠다는 의미이다.

 

기본 props값 설정하기

만약 받은 매개변수에서 원하는 prop이 나오지 않았다면 이 때 사용할 기본값을 지정해야한다. 

counter.js에서 Counter.defaultProps 에 이렇게 기본값을 집어넣으면 된다.

 

 

동적인 데이터 전달하기

 

실시간으로 오르고 내리는 값이 홀수인지 짝수인지 알아보는 프로그램을 만들고자 한다.

 

우선, oddeven.js 파일을 만든다.

count를 prop로 받는 객체를 만들고 이를 내보내는 코드를 작성한다.

그리고 counter.js에 들어가서 count를 전달하는 코드를 작성한다.

oddeven으로 돌아가서 전달받은 props의 값에 따라 짝수 또는 홀수를 리턴하도록 한다.

 

그럼 이러한 결과가 나오게 된다.

 

컴포넌트를 컴포넌트로 감싸기

 

현재 글자와 버튼들이 너무 왼쪽에 붙어 있으니까 이를 컴포넌트를 이용해서 정리할 것이다.

 

countainer 컴포넌트를 만든 후 다음과 같이 style을 만들어 리턴한다. 그리고 childern이라는 prop을 받아  출력하도록 코드를 작성한다.

 

그리고 App.js에 들어가서 위와 같이 container로 자식을 감싸면, 자식이 통째로 prop이 되어 넘어가서 container에서 출력된다.

 

출처 : 한입크기로 잘라먹는 리액트