[React-복습] 3. Components와 Props

in React on React 입문


Components와 Props에 대한 스케치 포스팅이다.


01. Components와 Props

개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.


01-1. 함수 컴포넌트와 클래스 컴포넌트

JavaScript 함수를 작성 방법

이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ES6문법 Class를 사용하여 컴포넌트 정의 방법

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


01-2. 컴포넌트 렌더링

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”(html 태그 속성값들의 객체)라고 한다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);


01-3. 컴포넌트 추출

  • 컴포넌트 추출
  • 컴포넌트 추출이란? 컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 말한다.

컴포넌트 추출 예제

/**
 * Dept 추출
 * @param {*} props
 * @returns
 */
function Dept(props) {
  return (
    <div>부서 : {props.user.deptName}</div>
    <div>직책 : {props.user.position}</div>
  );
}

/**
 * UserInfo 추출
 * @param {*} props
 * @returns
 */
function UserInfo(props) {
  return (
    <div>
      <Dept user={props.user} />
      <div>{props.user.name}</div>
    </div>
  );
}

/**
 * Avatar와 UserInfo 가 추출 된 Comment
 * @param {*} props
 * @returns
 */
function Comment(props) {
  return (
    <div>
      <UserInfo user={props.author} />
      <div>{props.text}</div>
      <div>{props.date}</div>
    </div>
  );
}


01-4. Props는 읽기 전용

  • props는 읽기 전용
  • 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정하면 안된다.
  • 컴포넌트에 전달되는 단일 객체이다.

순수 함수

이런 함수들을 순수 함수라고 칭함, 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문에

function sum(a, b) {
  return a + b;
}

순수 함수가 아닌 함수

반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.

function withdraw(account, amount) {
  account.total -= amount;
}


모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.(규칙)

물론 애플리케이션 UI는 동적이며 시간에 따라 변합니다. React 에서는 이러한 문제를 위해서 "state"이 있다.
React 컴포넌트는 state를 통해 위 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경할 수 있습니다.



[참고]