React 핵심

https://replit.com/~

Sign Up

집에서 코딩 해보고 싶은데 설치가 귀찮으면 여기서 하면됨

 

 

---

React 강의 정리

 

1. 컴포넌트

와꾸( 화면에 보이는 페이지 )

 

박스가 만들어짐 

근데 박스를 여러개 만드려면 같은 코드를 여러번 써야하고 코드가 너무 길어짐 

 

그래서 코드의 간결함을 위해 컴포넌트라는 걸 사용함

 

component로 Box.js를 만들고

Box.js

Box.js 안에 박스를 만듬

export로 Box를 내보내고

와꾸(화면)인 App.js에서 import해서 받아서 씀

Box.js의 모든 내용이 <Box /> 에 담겨버림

 

---

 

2. props

 

컴포넌트에 다이나믹한 값을 주고 싶을 때

 

1. props의 이름을 정하고 주고싶은 값을 준다

 

2.  컴포넌트에서 파라미터값으로 props를 받으면 와꾸인 App.js의 값을 받아 올 수 있다

      파라미터에 props가 아닌 다른 이름 일 수 있음

 

props는 객체 타입

props = {name="박재형"}

그래서 props.name을 하면 값이 불러와진다

 

 

 

 

 

 

버튼 만들어서 클릭이벤트 주기

 

 

이렇게 html도 있으면서 function 밑에 함수도 같이 쓰는걸 JSX 문법

 

JSX 문법 = html과 그와 관련된 함수를 뭉쳐서 세트(컴포넌트)로 만든 것

 

리액트는 컴포넌트를 갖다쓰면서 코드의 재활용성을 높인다

 

 

---

3. state

 

변수가 값이 업데이트 돼면 react는 신경 안씀

그때 state가 업데이트가 되면 react는 실행된다.

 

기존 자바스크립트 문법

 

자바스크립트였으면 버튼을 클릭하면 count가 증가했겠지만

react에서는 단순히 변수값이 업데이트 된다고 UI가 업데이트 되지 않는다

이때 state를 써야된다

 

state 사용

 

state가 바뀌면 자동으로 UI가 업데이트 된다

 

---

state 주의할점 1

 

콘솔로 countUp 값을 확인해봄

 

한번 클릭하면 countUp은 0

두번 클릭하면 1

왜 state는 한박자 느릴까

 

=> state는 UI를 다시 그려주는데 UI를 그리는건 비쌈

UI를 바꾸기 전 모든 set함수들을 모아서 함수가 끝나면 값을 업데이트함  -> 비동기적

 

비동기적이란 말 뜻은

코드 순서대로 실행되지 않고 함수가 끝나면 한번에 실행된다는 뜻

 

그래서

카운트 + 1 하고 콘솔을 찍어도 +1이 바로 실행되지 않고 

함수가 끝나고 실행되기 때문에 한박자 느리다

 

 

 

---

state 주의할점 2

 

state 값이 업데이트가 되면 변수의 값은 초기화 된다.

그래서 이제 모든 상황에서 변수 사용 X

변수는 잠깐 저장하는 용도로만 사용한다

 

state는 react가 주시하는 값이라서 저장됨

state값을 저장해두는게 useState가 하는일