반응형
Components와 Props
컴포넌트
- 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다.
- 개념적으로 컴포넌트는 JS 함수와 유사하다. 👉
props
라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
//함수형 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } //클래스형 class Welcome extends React.Component{ render(){ return <h1>Hello, {this.props.name}</h1> } }
👉 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트
컴포넌트 렌더링
React는 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props
라고 한다.
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const root = ReactDOM.createRoot(document.getElementById("root")); const element = <Welcome name="Sara" />; root.render(element);
<Welcome name="Sara" />
엘리먼트로root.render()
를 호출한다.- React는 `{name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다.
- Welcome 컴포넌트는 결과적으로
<h1>Hello, Sara</h1>
엘리먼트를 반환한다. - React DOM은
<h1>Hello, Sara</h1>
엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 한다.
❗ 컴포넌트 이름은 항상 대문자로 시작
- 소문자로 시작하는 컴포넌트는 React가 DOM 태그로 처리한다.
컴포넌트 합성
컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.
function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); }
컴포넌트 추출
하나의 컴포넌트를 이루는 구성요소들이 모두 중첩 구조로 이루어져 있으면 코드를 변경하기 어렵고, 각 구성 요소를 개별적으로 재사용하기도 힘들다.
이를 해결하기 위해 하나의 컴포넌트를 여러 개의 작은 컴포넌트로 나누게 된다.
function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} /> <div className="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }
Avatar
function Avatar(props) { return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> ); }
UserInfo
function UserInfo(props) { return ( <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> ); }
최종
function Comment(props) { return ( <div className="Comment"> <UserInfo user={props.author} /> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }
props는 읽기 전용
컴포넌트의 자체 props를 수정해서는 안 된다.
function sum(a, b) { return a + b; }
👉 순수 함수: 입력값을 바꾸려 하지 않음 + 동일한 입력값에 대해 항상 동일한 결과를 반환
function withdraw(account, amount) { account.total -= amount; }
👉 순수 함수X: 자신의 입력값을 변경하고 있다.
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.
React 컴포넌트는 다음 장에 배울 state
를 이용해 위 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 자신의 출력값을 변경할 수 있다.
함께 읽어보면 좋을 글
순수 함수와 리액트의 관계
리액트는 순수 함수를 이용하여 UI를 렌더링합니다. 즉 , 컴포넌트를 순수 함수로 구성하려합니다. 그렇다면 순수 함수는 무엇이고 왜 컴포넌트를 순수 함수로 구성하려하는 것일까요? 순수 함
velog.io
반응형
'웹 프로그래밍 > React' 카테고리의 다른 글
리액트 공식문서 읽기 - 주요개념(State) (1) | 2024.03.19 |
---|---|
리액트 공식문서 읽기 - 주요개념(엘리먼트 렌더링) (0) | 2024.03.18 |
리액트 공식문서 읽기 - 주요개념(Hello World, JSX 소개) (0) | 2024.03.18 |
리액트 공부 내용 정리 (0) | 2023.09.14 |
[React] 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달하기(props) (0) | 2023.09.05 |
[React] Link to 밑줄 없애기 (0) | 2022.04.10 |