3. React props

Props란

: props는 propertise의 줄임말로서 컴포넌트의 파라미터 (입력값) 이다.

props 사용방법

먼저 app.js에서 Hello라는 컴포넌트에 전달 값을 할당해준다.

그리고 Hello라는 함수에 props라는 파라미터를 넣고, {}중괄호 안에 props.전달할 값 을 입력해준다.

그럼 리액트 브라우저에 name이 나오는 것을 볼 수 있다.

다시 color라는 값을 전달해보자. color="pink"

그리고 hello.js에서 return값에 style={} 안에

{color: props.color}

라는 객체를 할당한다.
{{}}중괄호를 두번 감싸준 이유는 괄호 안 자바스크립트 값을 객체로 보겠다는 의미.

비구조화 할당, 구조 분해 문법 활용 시 더 간편하게 만드는 법.

파라미터에 직접 전달할 객체를 넣어주고, {}안에 파라미터 값만 넣어주면 된다.

props의 default값(기본값)을 지정해주고 싶을 때

함수명.defaultProps={key:value값};

props.children 사용법

컴포넌트 사이에 있는 값들을 나타내기 위해서는 props에 children을 사용.

props에 children을 할당하면 -> app.js에서 box태그에 감싸진 값들을 전달 받을 수 있다.