[React] React 시작하기

1년전 프로젝트를 진행하면서 기초도 모르면서 계란으로 바위깨기 마인드로 React와 React Native를 공부했었는데 

다시금 필요성을 느끼게 되어 기초부터 공부하게 되었다. (거의 백지 상태...) 그 당시엔 JavaScript에 대한 이해도도 턱없이 낮았고 state, props와 같이 가장 중요한 개념에 대해서 완벽히 이해를 하지 못했었던 것 같다. 

---

출처 : https://ko.reactjs.org/tutorial/tutorial.html#overview

자습서: React 시작하기 – React

React 컴포넌트 클래스, React 컴포넌트 타입 : 개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 뷰 계층 구조를 반환.

 

render 함수 : 화면에서 보고자 하는 내용 반환. render는 렌더링할 내용을 경량화한 React 엘리먼트를 반환한다. 

 

Props : 부모 컴포넌트가 자식 컴포넌트에 주는 값. 자식 컴포넌트에서는 props를 받아오기만 하고 직접 수정할 수는 없다.

 

State : 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 동적 데이터를 다룰때 사용한다.

 

메소드 작성

    handleClick(i){
        const squares = this.state.squares.slice();
        if(calculateWinner(squares) || squares[i]){
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            squares: squares,
            xIsNext: !this.state.xIsNext,
        });
    }

setState

state에 있는 값을 바꾸기 위해서는 this.setState를 무조건 거쳐야한다. React에서는, 이 함수가 호출되면 컴포넌트가 리렌더링 되도록 설계 되어있다.