리액트 기본

state = 데이터가 저장되는곳

화면에 보여주기 위해선 랜더링 필요

 

 

컴포넌트 =  html을 보여주는 단지 함수

컴포넌트중 설정을 넘겨줄수 있는 기능이 있다면??

>> props

 

 

삼항연산자

조건 ? 참값 : else값

 

 

 

 

 

props

부모 컴포넌트에서 자식 컴포넌트로 값을 내려준다고 생각하면 편하다.

props는 props 안에서 객체 형식으로 값을 넘겨준다.
따라서 자식 컴포넌트에서 값을 사용하고 싶다면 props.키값 으로 사용한다.
구조분해 할당으로 const {키값} = props 으로도 접근해서 사용 가능 하다.
자식에서 부모한테 주는 방법은 없다.
이러한 구조로 인해 리액트는 단방향 구조를 가지는 프레임워크이다.

 

함수형

props.name

혹은 name자체로 받아오기

클래스형

this.props.name

es6 부터 const name = this.props 이후 name 사용 가능

 

월래형태 

{"텍스트"}  

허용

"텍스트"

 

 

propTypes 로 타입 설정 가능

 

state 

스테이트를 가질수 있는건 클래스 뿐이다

컴퍼넌트에서 저장해야할 자료

사전같은 느낌 > 저장된 값을 찾아다 쓸수 있음

축약

https://www.youtube.com/watch?v=wkFGIV9RV2M 

 

setState

setState는 어떤 일을 하나요?

setState()구성 요소 state개체에 대한 업데이트를 예약합니다. 상태가 변경되면 구성 요소는 다시 렌더링하여 응답합니다.

setState()는 비동기로 처리된다.

동기로 처리하고 싶으면

useEffect

모든 함수를 하나로 합친다.

명시적으로 값을 다음 함수에 넘긴다.

reducer를 사용하는 방법

useRef()를 사용하는 방법

useCallback()을 사용하는 방법

https://velog.io/@dongkyun/setState-%EB%8F%99%EA%B8%B0%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

setState 동기적으로 사용하기

 

동기(synchronous : 동시에 일어나는)

 - 동기는 말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속인데요. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다.

• 요청과 결과가 한 자리에서 동시에 일어남
• A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다.

 

 

비동기(Asynchronous : 동시에 일어나지 않는)

 - 비동기는 동시에 일어나지 않는다를 의미합니다. 요청과 결과가 동시에 일어나지 않을거라는 약속입니다. 

• 요청한 그 자리에서 결과가 주어지지 않음
• 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.

 

 

state와 props의 차이점은 무엇인가요?

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

 

 

 

React에서 this.props와 this.state는 모두 렌더링된 값을 나타냅니다. 다시 말해 현재 화면에 보이는 것을 말합니다.

setState 호출은 비동기적으로 이뤄집니다. 따라서 setState 호출 직후 새로운 값이 this.state 에 반영될 거라고 믿어서는 안 됩니다. 이전 state 값을 기준으로 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요.

 

 

 

컴포넌트는 그 안에 또 다른 컴포넌트를 렌더링 할 수 있다.
분할 정복(divide and conquer)
- App 컴포넌트는 root div를 그려주는 역할
- App 컴포넌트는 그 안에 다른 2개(분->시간, km->miles 컨버터)의 컴포넌트들을 렌더링
- App 컴포넌트가 state를 가지도록 만들자
-select는 그냥 HTML
- {}안에는 JS를 쓸 수 있다.
- state를 변화시킬 때, 모든게 다 새로고침 된다.. - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

 

 

useEffect 훅이란?

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

 

 

훅은 리액트의 기능

훅: functional component 에서 state를 가질수 있게 해줌

>> 앱을 리엑트 훅으로 만들면 class component, did mount render , 거지같은 this 생략 가능

>> 모든것이 하나의 함수가 죔

state component의 많은 기능을 변경 가능

 

>>>>>> 

 

 

wow!