React - Props

props 란

자식이 부모 Component 에 있는 State 를 사용하고 싶을 때 사용하는 기능입니다.

React는 기본적으로 단방향(하향식) 데이터 바인딩을 합니다. (부모 → 자식 = O) (자식 → 부모 = X)

그래서 부모 Component에서 props로 데이터를 넘겨주지 않으면 자식Component에서 부모 Component의 데이터를 사용하거나, 변경할 수 없습니다.

 

props 사용법

사용하는 방법은 부모태그에서 자식 컴포넌트를 사용할 때 아래와 같이 State 를 넘겨줄 수 있습니다. (이름은 보통 State 의 이름과 똑같이 적어줍니다.)

그리고 자식 Component 에서 파라미터에 변수명 하나를 적어줍니다.(보통 props 라고 적습니다.)

그렇게하면 이제 props.subjectState 이렇게 해서 부모태그의 State 를 사용할 수 있게 됩니다.

props 는 부모에서 자식으로만 전송이 가능합니다.(자식에서 부모로 전송과 형제태그로의 전송 불가능)

 

응용하기

아래와 같이 여러개도 가능합니다.

또한 props 로 전송할 수 있는 것은 State 뿐만 아니라, 모든 값들을 보낼 수 있습니다.(문자, 함수 등)

• 문자 전송 예시

 

• 함수 전송 예시

 

각각의 글 제목을 누르면 해당하는 상세페이지 보여주기

• 먼저 글 제목들은 배열 형태로 되어있기 때문에 동적으로 바꿔주려면 배열의 index 값이 필요합니다.
• 이 index 값은 계속 변경되는 값이므로 State 로 만들어둡니다.

• 그 다음에 자식 Component 에 props 로 index State 를 전송해줍니다.
• 그리고 아래와 같이 몇가지만 추가해주면 완성입니다.

 

props 를 축약형으로 사용하기

아래와같이 파라미터 값을 받을 때 ‘props’ 대신 ‘{ a, b, c ,d )’ 처럼 넘겨받은 props 의 이름들을 나열하면 ‘props.’ 없이 사용할 수 있습니다.