[React Study - 3] Components, Props

* React 공식 문서 : https://ko.reactjs.org/docs/components-and-props.html

00 Components

컴포넌트(Component)는 리액트를 구성하는 가장 작은 단위로, 이 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 작은 컴포넌트들이 모여서 하나의 컴포넌트 구성하고, 이 컴포넌트들이 모여 하나의 페이지 구성하는 구조로, 코드 유지 보수 시 필요한 컴포넌트만 확인하면 되기 때문에 개발시간 및 유지 보수 비용이 감소한다.

 

컴포넌트는 데이터(props, 속성)를 입력받아 View(state)상태에 따라 DOM node를 출력한다. 컴포넌트의 이름은 반드시 대문자로 시작해야 하며, 'props' 라는 임의의 입력을 받은 후 , 화면에 어떻게 표시되는지를 기술하는 React element를 반환한다.

 

컴포넌트 예시

//기존 App.js 에서 Header.js를 분리
function App() {
  return (
    <div className="App">
    //이 부분을 Header라는 컴포넌트로 분리
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
          Type any text
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      //  Header.js라는 별도의 js로 저장 뒤 export
      </header>
    </div>
  );
}

//Header.js를 App.js에 import하고 function App에 컴포넌트 입력
function App(){
    return (
         <div className="App">
	     <Header /> //<- 이런 식으로 header 컴포넌트를 넣을 수 있음
         </div>
    )
}

함수 컴포넌트, 클래스 컴포넌트

//함수 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다. 데이터를 가진 하나의 props 객체 인자를 받은 후 React element를 반환한다. Javascript 함수이기 때문에 말 그대로 "함수 컴포넌트(Functional Component)"라고 한다.

//클래스 컴포넌트
class Welcome extends React.Component { 
  render() {  //render 라는 함수 안에서 return 해줘야 함
    return <h1>Hello, {this.props.name}</h1>;
  }
}

클래스형 컴포넌트(Class Component)는 컴포넌트 구성 요소, 리액트 생명 주기를 모두 포함하고 있다. 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

함수형 컴포넌트를 주로 사용하지만, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때 클래스형 컴포넌트를 활용한다.

01  Props

Props는 properties의 줄임말으로, 속성을 의미한다. 상위 컴포넌트(=부모 컴포넌트)가 하위 컴포넌트(=자식 컴포넌트)에 값을 전달할 때 사용하는 데이터이다. 컴포넌트 안에 들어갈 새로운 값을 컴포넌트에 전달하여 새로 element를 생성하는 방식으로 동작한다. 프로퍼티의 가장 큰 특징은 수정할 수 없는 Read-only 읽기 전용 데이터라는 것이다. 그렇기 때문에 컴포넌트 자체 props는 수정해서는 안 된다.

 

Pure 함수, Impure 함수

//순수 함수
function sum(a, b) {
  return a + b;
}

Pure(순수) 함수는 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환한다. (=parameter을 변경할 수 없다)

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

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

모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

이 부분을 풀어서 설명하자면 모든 리액트 컴포넌트는 props 를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과(React element)를 보여줘야 한다는 것이다.

 

사용법

JSX를 사용하면 다음과 같이 사용할 수 있다.

//JSX 사용
function App(props){
    return (
	<Profile
	       name="홍길동"
	       description="안녕하세요, 홍길동입니다."
	       viewCount={12345}
	/>
    )
}

//props
{
     name="홍길동"
     description="안녕하세요, 홍길동입니다."
     viewCount={12345}
}

//component 넣기
function App(props){
     return (
	<Layout
	     width={1920}
	     height={1080}
	     header={
		<Header title="홍길동의 블로그입니다." />
	     }
	     footer={
		<Footer />
	     }
	/>
     )
}

React.createElement를 활용 시, 두 번째 parameter가 props이기 때문에 그 자리에 props를 넣으면 된다.

하지만 JSX를 활용하는 쪽이 더 편리하기 때문에 알아두기만 해도 될 것 같다.

---

참고자료

https://velog.io/@dev_cecy/React-Component-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0-feat.props

https://goddaehee.tistory.com/299

https://goddaehee.tistory.com/300

React 공식 문서