React Component

Angela_Hong·2023년 2월 4일

React

🌕 React Component

🌗 React Component란?

리액트로 만들어진 앱을 이루는 최소한의 단위
컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수이다.

🌗 React Component 사용 이유

기존의 웹 프레임워크는 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있다.
반면 컴포넌트는 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.

🌗 React Component 사용 방법

컴포넌트 이름은 항상 대문자로 시작
(리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급하기 때문에)
UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

🌗 React Component 정의하는 방법

JavaScript 함수를 작성
function Welcome(props){
	return <h1>Hello, {props.name}</h1>;
}
이 함수는 데이터를 가진 하나의 "props" 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다.
이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그래도 함수 컴포넌트라고 호칭한다.

ES6 class를 사용하여 작성

class Welcome extends React.Component{
	render(){
		return <h1>Hello, {this.props.name}</h1>;
	}
}

React 관점에서 볼 때 위 두가지의 유형의 컴포넌트는 동일하다

🌗 Component Rendering

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element = <Welcome name="Sara" />

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 한다.

다음은 페이지에 "Hello, Sara"를 렌더링하는 예시이다.

function Welcome(props){
	return <h1>Hello, {props.name}</h1>;
}
const root=ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

위 예시에서는 다음과 같은 일들이 일어난다.
1. <Welcome name="Sara" /> 엘리먼트로 root.render()를 호출한다
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트로 호출한다
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환한다.
4. React DOM은 <h1>Hello, Sara</h1>엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 한다.

🌗 Component 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.
React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.

Welcome을 여러번 렌더링하는 App컴포넌트를 만들 수 있다

function Welcome(props){
	return <h1>Hello, {props.name}</h1>;
}
function App(){
	return(
		<div>
      		<Welcome name="Sara" />
        	<Welcome name="Cahal" />
            <Welcome name="Edite" />
		</div>
	);
}

🌗 Component 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것

다음 Comment컴포넌트를 여러 컴포넌트로 나누기

Comment 컴포넌트는 author(객체), text(문자열), date(날짜)를 props로 받은 후 소셜미디어 웹사이트의 코멘트를 나타낸다.

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} />
    );
}

Avatar는 자신이 Comment내에서 렌더링 된다는 것을 알 필요가 없다. 따라서 props의 이름을 author에서 더욱 일반화 시킨 user로 변경함.
Avatar를 컴포넌트로 수정한 Comment

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <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>
  );
}

UserInfo 컴포넌트 추출하기
Avatar옆에 사용자의 이름을 렌더링하는 UserInfo

function UserInfo(props){
	return(
    	<div className="UserInfo">
      		<Avatar user={props.user} />
			<div className="UserInfo-name">
              {props.user.name}
			</div>
		</div>
    );
}

UserInfo를 컴포넌트로 수정한 Comment

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>
  );
}