1. 객체의 값 갱신
const removeTodo = (id) => {
const newTodos = todos.filter((todo) => todo.id != id);
setTodos(newTodos);
};
const modifyTodo = (id, title) => {
const newTodos = todos.map((todo) =>
todo.id != id ? todo : { ...todo, title }
);
setTodos(newTodos);
};id가 일치하지 않는 경우는 todo를 그대로 돌려주고, id가 일치하는 경우는 title의 값을 갱신한다.
전개 구문을 통해, todo의 얕은 복사본을 만들고, 업데이트된 속성을 지정할 수 있다.
title이 title:title로 명시적으로 언급되지 않더라도 title은 추가/업데이트되는 속성의 이름이자 새 값을 보유하는 변수인 것으로 가정된다. JavaScript에서는 값 없이 변수 이름을 제공하면 변수 이름을 속성 이름으로 사용하고 해당 값을 개체 리터럴의 해당 속성 값으로 사용한다.
2. 리엑트 커스텀 훅
관련된 state를 하나로 묶는다.
자식 컴포넌트들한테 다양한 매개변수를 하나하나 전달하는게 아니라 이 훅 하나를 통째로 전달하는 것으로, 코드의 복잡성을 줄일 수 있다.
3. Immer
Immer 를 사용하면 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer 가 불변성 관리를 대신 해줍니다.
import는 skypack을 이용해서 하자.
draft 함수 안에서 사용되는 것들은 전개구문을 사용하지 않아도, 불변성을 유지해준다.
draft.findIndex 함수를 사용하면 특정 조건에 일치하는 index의 값을 찾아올 수 있다.
ex )
const newTodos = produce(todos, draft => {
draft.push({id:3, title:"제목3"})
draft[1].title="zxcv";
});
setTodos(newTodos)
실무에서는 아래와 같이 직접 setTodos안에 코드를 집어넣는 경우가 더 많다.
setTodos( produce(todos, draft => {
draft.push({id:3, title:"제목3"})
draft[1].title="zxcv";
}));
draft사용하는건 필수가 아니며, 오히려 그냥 전개구문을 사용하는 편이 더 쉬울 수도 있다.
4. useRef
useRef -> focus 기능등에 사용
useRef를 이용한 간단한 focus처리
[https://codepen.io/jxdpqbjt-the-selector/pen/wvZqgyj?editors=1111]
useState:값이 변경되면 함수가 리랜더링됨.
useRef: 값이 변경되어도 함수가 리랜더링 되지 않음. 속도 향상을 위해서 사용.
input이 되어야 최초로 ref에 초기값이 생김.
5. useEffect
useEffect는 순차적으로 실행되지 않는다. 아랫줄의 코드 보다도 늦게 실행된다.
useEffect는 의존성 배열이 있을 때만, 최초로 등장하는 한번만 랜더링한다.
6. 컴포넌트의 랜더링에 관해
자식 컴넌트 안에서 리랜더링 되면 부모 컴포넌트에 영향을끼치지 않는다.
부모 컴넌트가 리랜더링 되면 자식도 리랜더링 된다.
