본문 바로가기
개발/React

[React] 리액트 기본 개념

by yo.na 2022. 2. 15.

1. React 에서 사용하는 기본개념 공부

State : 바뀔 여지가 있는 부분, 변하는 부분 ( 버튼클릭 시 ~~로 변한다)

setState : 수동으로 바꿔야 하는 부분

onSubmit : 주로 form 태그가 있을 때 사용

onClick : form 없이 버튼만 클릭할 때 사용

jsx : js + xml

Node : 자바스크림트 실행기. 서버x 

 

2. class 와 hooks 의 차이

- class

setState 가 일어날 때마다 렌더링된다.

Render 부분만 렌더링 된다.

- hooks 

hooks 로 함수 만들어서 실행하면 함수 전부가 렌더링된다.

class 보다 더 오래 걸릴 수 도 있다.

 

3. 함수를 사용하는 이유

rendering 할 때 마다 함수를 새로 만들면 낭비이기 때문에 함수 따로 빼서 사용.

render 가 너무 자주 실행되기 때문에 함수로 빼서 사용.

 

4. this.state.value 

// setState 안에 this.state 가 들어가면 1 방법 사용하기!
                     // count 함수를 만들 때
                     // 1 : 이전값 prevState + 1
                     this.setState((prevState)=> {
                        return {
                           value: prevState.value + 1,
                        }
                     })
                     // 2 : 새로운 값 this.state.value + 1
                     this.setState({
                        value: this.state.value + 1,
                     })

 

 

참고자료

Zerocho 님 유튜브