ReactJS Component의 Props에 대한 정리

오늘은 ReactJS Component의 Props에 대해서 정리해 보도록 하겠습니다.

참고로 Component에 대한 것은 지난 글을 참조해 주세요.

1. Props

모든 Component는 Props를 가지고 있는데요,

Props는 Component에 전달된 정보를 가지고 있는 객체입니다.

따라서 이 Props를 이용해서 정보를 전달하고 받는 것이 가능합니다.

JSX형식으로 렌더링될 클래스를 </>안에 집어 넣어주고, 

img태그에 값을 전달할 때 처럼 한칸띄우고key=value형태로 전달해주면 됩니다.

당연히 여러개의 값을 전달하는 것도 가능하구요.

정보를 전달할 때 주의할 점은 string이 아닌 경우 괄호{}로 열고 닫아 주어야 한다는 점이구요.

예를 들면 아래와 같은 식으로 Hello클래스에 값을 전달할 수 있는 것입니다.

<Hello name="song" />

<Hello name="park" hasMiddleName={false}  age = {55}/>

그럼 이렇게 받은 값을 전달받을 수 있어야 하는데요.

this로 접근이 가능한데요. 아래와 같이 접근이 가능합니다.

this.props.name

this.props.hasMiddleName

this.props.age

아래 이미지에서는 this.props.name을 통해서 이름 값을 받아오고 있습니다.

이런 값을 props 로부터 받아온다는 것은,

if문 같은 조건문을 만들수도 있고,

undefined같은 값이 들어올 때를 대비해서 체크해야하는 경우도 생긴다는 것을 의미합니다.

Props는 당연히도 EventHandler를 전달할 수 있는데요.

예를들면, 먼저 아래와 같이 버튼을 누르면 Props를 통해서 전달된 EventHandler를 실행하도록 하는 class를 정의하고,

export 해 줍니다.

Reaction컴포넌트에서 위에서 정의한 UI를 import해서 return해주고,

이 때, 이벤트 핸들러로 handleClick과 handleHover를 전달해 주면 되는 것이지요.

아래와 같이 Class가 아닌, function으로 사용할 수도 있는데요.

ReactJS에서는 Function Component라고도 부릅니다.

(개인적으로는 코드수도 적고 더 심플해보이기는 합니다.)

한가지 주의할 점은 props로 들어온 값을 변경하려고 하면 않된다는 점입니다.

인자로 들어온 값을 +혹은 -해서 변경하려고 한다면 에러가 나게 됩니다.

props는 컴포넌트 자기자신의 값을 바꾸기 위한 것이 아니라,

다른 컴포넌트에 의해 바뀌어지는 값을 받기위해서 사용합니다.

스스로 값을 바꾸고자 할 때는 다른 글에서 다를 주제인 state를 이용하면 됩니다.

마지막으로 한가지 더 보아야 할 것은 

defaultProps입니다.

이것은 props를 받아와서 UI를 그려야 하는데,

아무값도 들어오지 않을 것을 대비해서 default값을 미리 넘겨준다는 것이구요.

아래와 같이 객체형태로 정의해서 넘겨줄 수 있습니다.

2. Props.Children

children이라는 말에서 알 수 있듯이,

부모에 속한 것들을 말합니다.

아래에서 div의 props.Children은 "test"가 됩니다.

<TestDiv>test</TestDiv>

list의 경우 ul이나 ol태그아래에 li가 children으로 존재하고 있을 텐데요.

아래와 같은 경우, CustomList에서 this.props.children을 UI에 그리도록,

render메소드에 넣어준다면 화면에 그릴 수 있겠습니다.

<CustomList>

<li>리스트1<li>

<li>리스트2<li>

</CustomList>

이상으로 ReactJS의 Props에 대해서 정리해 보았습니다.

복잡하기는 하지만, Component를 연결하는 역할을 하므로 잘 알아두어야 겠네요.