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태그에 감싸진 값들을 전달 받을 수 있다.
Author And Source
이 문제에 관하여(3. React props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sseyoung0419/3.-React-props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)