본문 바로가기

React

1

useState

[state, setState] = useState(arg)

state: 현재 변수

setState: 해당 변수를 갱신해주는 함수

state 변수를 useState() Hook이 넘겨주는 인자값으로 초기화

해당 변수를 리렌더링할 때 기억, 가장 최근에 갱신된 값을 제공

setState 함수 호출을 통해 state 변수의 값을 갱신

 

기본적으로 상태(useState)로 만들면 안되는 것들

1. 기존 상태를 활용해서 만들 수 있는 것

2. props를 활용해서 만들 수 있는 것

 

구조분해할당

const countState = useState(0);

const count = countState[0];

const setCount = countState[1];

---------------------------------------

const [count, setCount] = useState(0);

 

map, filter

map, filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출,

콜백 함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달

map: 콜백 함수의 반환값들로 구성된 새로운 배열을 반환

filter: 콜백 함수의 반환값이 true 요소로만 구성된 새로운 배열을 반환

 

props, children

children은 함수같은 것을 제외하고 거의 다 들어감

 

Component

컴포넌트는 기존의 html 태그의 인터페이스를 최대한 따라가는게 좋음

컴포넌트 사용 이유 -> 컴포넌트는 결국 함수다

함수를 만드는 이유

1. 특정 역할 수행하도록 함

2. 재사용되는 로직을 모듈화해서 불필요한 반복 작업을 줄임