React

-react를 사용하는 목적

: 사용자와의 인터렉션이 많을 경우 수많은 상태관리가 필요한데 상태법 관리를 최소화해주고 오직 기능개발에만 집중할 수 있도록 하기 위해 사용

: 컴포넌트라는 개념에 집중하고 있는 프론트엔드 라이브러리

: 나만의 html태크

​

-ES6

: 리액트는 기본적으로 ES6를 사용

: 기본적으로 알아야하는 규칙

-> destructuirng, spread operator, real parameters, default parameters,

template literals, arrow function, for-of loop

​

-JSX

리액트 컴포넌트를 화면에 보여주기 위한

복잡도를 줄이고 가독성을 높이기 위해서

주의할점

반드시 하나의 엘리먼트로 감싸야한다.

자바스크립트 코드를 적용할 땐 {} 안에 작성한다.

jsx내부에서는 if 문 사용불가(삼항연산자 필수)

클래스 이름 지정할 때 className를 사용

​

- 리액트의 개념

> data flow

: 단방향 데이터 흐름, 거꾸로 불가능, 부모에서 자식으로만 흐름

> props

: 상위 컴포턴트가 하위 컴포넌트 에게 내려주는 데이터

: 하위는 단순히 사용만 가능 변경 불가능

ex) 부모님의 이름을 자식이 함부로 바꿀 수 없듯이

: {props.name}

> state

: 비유하자면 컵 안에 들어있는 물이라 할 수 있음

: 동적인 데이터를 다룰 때 사용

: 컴포넌트가 갖는 상태(이러한 상태의 변경은 가능함)

: 객체의 형태로 컴포넌트 내에서 선언

: 클래스 컴포넌트로 작성(es6방식)

: setStatus메서드를 사용하여 값 변경가능

(값을 변경 시 or 무언가 업데이트 있을 시) -> 매번 render()함수가 실행

> life cycle

: 컴포넌트가 브라우저에 보여질 때나 업데이트 될 때 각 과정 전, 후 로 특정 메서드가 호출되는 과정

: life cycle를 잘 알아야 코드를 짤 때 조금 더 수월하다.

출처:  https://velopert.com/1130

 

- class 안에서 constructor 밑에 super(props)를 호출 한 이유

: 우리가 컴포넌트를 만들게 되면서, Component 를 상속했으며, 우리가 이렇게 constructor 를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 됨

: 리액트 컴포넌트가 지니고있던 생성자를 super 를 통하여 미리 실행

: 그 후에, state 설정(this.state)