React 뿌시기 2일차 💪💪💪 (3) - Component와 Props
Component와 Props
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음
개념적으로 컴포넌트는 JS 함수와 유사함
'props'라고 하는 임의의 입력을 받은 후,
화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환함
함수 컴포넌트와 클래스 컴포넌트
function welcome(props) {
return <h1>Hello, {props.name}</h1>
}
이 함수는 데이터를 가진 하나의 'props' (속성을 나타내는 데이터) 객체 인자를 받은 후
React 엘리먼트를 반환하므로 유효한 React 컴포넌트
이러한 컴포넌트는 JS함수이기 때문에 말 그대로 '함수 컴포넌트'라고 호칭
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
react 관점에서 볼 때 두 가지 유형의 컴포넌트는 동일
컴포넌트 렌더링
이전까지는 React 엘리먼트를 DOM 태그로 나타냈지만,
react 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있음
const element = <Welcome name="Sera" />;
react가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면
JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 'props'라고 함
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
// Welcome 컴포넌트에 jsx 어트리뷰트, 자식을 전달!
ReactDOM.render(
element,
document.getElementById('root')
);
- 프로세스 -
- 엘리먼트로 ReactDOM.render()를 호출
- React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
- Welcome 컴포넌트는 결과적으로
Hello, Sara 엘리먼트를 반환
- React DOM은
Hello, Sara 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트
주의 : 컴포넌트의 이름은 항상 대문자로 시작!
https://ko.reactjs.org/docs/components-and-props.html
Author And Source
이 문제에 관하여(React 뿌시기 2일차 💪💪💪 (3) - Component와 Props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@soulee__/React-뿌시기-2일차-3-Component와-Props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)