[React] 리액트 컴포넌트

들어가기 전에..

컴포넌트는 스스로 상태를 관리하는 캡슐화된 코드 조각이라고 할 수 있다.
화면을 각 요소로 쪼개고, 그 하나하나의 조각을 컴포넌트라고 한다.

1. 컴포넌트 생성 과정

컴포넌트는 하나의 JSX를 반환하는 함수

	function App() {
      return (<div>
              	<h1>Hello</h1>
              </div>
             );
    }
      ReactDOM.render(<App />,document.getElementById("root");
		

함수 형태로 컴포넌트를 생성하게 되면, 함수라는 스코프에 의해서
내부 스코프와 외부 스코프로 경계가 나눠지게 된다.
로직, 내부 상태를 고유하게 가지고 있을 수 있게 되고,
컴포넌트로 모듈화하여, import / export 문법을 사용할 수 있다.

2. 컴포넌트 이름 짓기

컴포넌트 이름은 PascalCase로 짓는다. (각 단어의 첫 문장을 대문자로 적기)

컴포넌트를 의미 단위로 쪼개서 파일을 분리한다.

최상위 컴포넌트는 일반적으로 App으로 명명된다.

index.js는 모든 리액트 코드의 엔트리 포인트이며, 최종 컴포넌트를
DOM에 랜더링한다.

App Component는 모든 컴포넌트의 루트 컴포넌트이다.

3. Props

부모 컴포넌트에서 자식 컴포넌트로 내려주는 데이터이다.

Object 형태로 전달해줄 때의 속성 이름과 동일한 key로 접근

props.children 이용해서 컴포넌트 태그로 감싼 값을 전달할 수도 있음

	function App() {
    	return(
        	<div>
            	<MyComponent value={'test'} />
                <MyComponent>
                	<h1>Hello!</h1>
                </MyComponent>
            </div>
        );
    }
    
    function MyComponent(props) {
    	return <div>{props.value}</div>
    }
    
    function MyComponent(props) {
    	return <div>{props.children}</div>
    }

4. State

컴포넌트 내부에서 사용되는 변수이다.

State 값이 변하면 컴포넌트가 리랜더링된다.

랜더링 사이클에서 값이 보존된다.

5. 클래스형 컴포넌트

클래스 문법으로 구현한 컴포넌트이다.

React 16.8 이전에서는 클래스형 컴포넌트만 State를 가질 수 있었음.

클래스의 멤버 변수로 State를 정의하고, render라는 멤버 함수에서
반환한 값(JSX)이 화면에 랜더링 되었다.

class App extends Component {
	// state라는 하나의 object로 묶어서 관리함
	state = {
      value: 0;
    }
    
    constructor(props) {
    	super(props);
        this.state = {
        	value: 1;
        }
    }
    
    resetValue() {
    	this.setState({ value: 0 });
    }
    
    render() {
    	return(
        	<div>
            	<button
                onClick={() => {
                	// 클래스의 멤버함수 이용해서 mutate
                	this.setState((state) => {
                    	value: state.value + 1
                    });
                }}>
                increase Value
                </button>
                <button
                onClick={() => { 
                 	// this binding 중복 방지하기
                	this.resetValue.bind(this)
                }}>
                	Reset Value
                </button>
            </div>
        );
    }
}

6. 함수형 컴포넌트

클래스형 컴포넌트가 이해하기 어렵고, 코드 재활용성이 떨어지는 경우가 있어
Hooks가 등장했다.

함수에 State 변화 감지를 위해 useState Hook이 등장했다.