[React Document] Component와 Props

이 포스팅은 React Document 주요개념 Component와 Props 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다.

UI를 재사용 가능한 개별적인 여러 조각으로 나눈것을 컴포넌트라고 합니다.

개념적으로 보자면 컴포넌트는 Javascript의 함수와 유사하다. props라는 임의의 입력을 받아 React Element를 반환합니다.

컴포넌트의 시작은 대문자로 시작한다.
컴포넌트는 최대한 쪼개 별도의 컴포넌트로 만드는게 좋다.

💡 함수 컴포넌트와 클래스 컴포넌트

React에서 컴포넌트를 만드는 방식에는 함수로 작성하는방식과 , ES6의 Class를 사용하여 컴포넌트를 작성하는 2가지 방식이 있습니다.

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

// class형 컴포넌트
class Profile extends React.Component{
 	 
  render() {
   	return <h1>Hello, {props.name}</h1> 
  }
}

React의 관점으로 바라보자면 동일한 컴포넌트이지만 class는 추가 기능이 있습니다. class를 사용하여 작성하는 방법은 추후 포스팅 하도록 하겠습니다.

💡 컴포넌트 렌더링

전에 작성하였던 2개의 포스팅에는 변수에 html tag를 할당했었습니다.

하지만 사용자 정의 컴포넌트를 사용한다면 다음과 같이 나타낼 수있습니다.

const profile = <Profile name="YundleYundle" />

위와같이 작성한다음 React.render에 넘겨준다면 다음과 같이 표현할 수 있습니다

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

const profile = <Profile name="YundleYundle" />
ReactDom.render(profile, document.getElementById("root"));

💡 컴포넌트 합성

React의 컴포넌트는 return시 다른 컴포넌트를 참조할 수 있다.
예를들면 위에 작성한 Profile 컴포넌트를 여러번 렌더링하는 App이라는 컴포넌트를 만들어보겠습니다.

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

function App() {
 return (
   	<div>
    	<Profile name="YundleYundle1" /> 
     	<Profile name="YundleYundle2" /> 
     	<Profile name="YundleYundle3" /> 
    </div>
   )
}

위와 같이 작업을하게 되면 App컴포넌트안에서 Profile컴포넌트를 합성한 새로운 App 컴포넌트가 작성됩니다.

Props

💡 Props는 읽기 전용이다.

함수 컴포넌트나 클래스 컴포넌트 무도 컴포넌트에 자체 props를 수정해서는안된다.

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

// 순수 함수 (X)
function withdraw(account, amount) {
 account.total -= amount; 
}

React는 매우 유연하지만 모든 컴포넌트는 자신의 props를 다룰 때는 반드시 순수함수처럼 동작해야한다.