728x90
반응형
이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다.
학습범위: p254~p288
1. react-icons를 처음 써봤다.
링크: https://react-icons.github.io/react-icons/
장점 같은 경우는 SVG 형태로 이루어진 아이콘을 리액트 컴포넌트처럼 쉽게 사용을 할 수 있다는 점이다.
material UI보다
불편했던 점은 import ~ from ~ 이거를 일일이 다 써주는게 불편했다.
2. rem 아직도 어떻게 쓰는지 잘 모르겠다. 기준을 모르겠다.
const ItemCont = styled.div`
padding: 1rem;
display: flex;
align-items: center;
&:nth-of-type(even) {
background: #f8f9fa;
}
`;
3. 영역을 모두 차지하게 할때 flex:1 꽤 유용하다고 느낀다.
4. 스타일 컴포넌트 사용할때 해당 클래스에 주려면 &.클래스이름 이런식으로 사용하면 된다.
const CheckBoxCont = styled.button`
flex: 1;
display: flex;
align-items: center;
svg {
font-size: 1.5rem;
}
p {
margin-left: 0.5rem;
}
&.checked {
svg {
color: #febb6c;
}
p {
color: #adb5bd;
text-decoration: line-through;
}
}
`;
5. 글씨 한 가운데에 줄을 그으려면 text-decoration:line-through; 를 이용하면 된다.
6. 가상의 데이터 구조를 만들어서 작성
function App() {
const [todos, setTodos] = useState([
{
id: 1,
text: "한라봉으로 주스 만들어 먹기",
checked: true,
},
{
id: 2,
text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
checked: true,
},
{
id: 3,
text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
checked: false,
},
]);
7. useCallback Hook
:컴포넌트가 리렌더링 될 때마다 함수를 새로 만드는 것이 아니라, 한 번 함수를 만들고 재사용할 때 사용.
props를 전달해야할 함수를 만들 때는 useCallback을 사용하여 함수를 감싸는 것이 최적화에 좋음.
import { useState, useRef, useCallback } from "react";
import TodoTemplate from "./components/TodoTemplate";
import TodoInsert from "./components/TodoInsert";
import TodoList from "./components/TodoList";
function App() {
const [todos, setTodos] = useState([
{
id: 1,
text: "한라봉으로 주스 만들어 먹기",
checked: true,
},
{
id: 2,
text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
checked: true,
},
{
id: 3,
text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
checked: false,
},
]);
const nextId = useRef(4);
const onInsert = useCallback(
(text) => {
const todo = {
id: nextId.current,
text,
checked: false,
};
setTodos(todos.concat(todo));
nextId.current += 1;
},
[todos]
);
const onRemove = useCallback(
(id) => {
setTodos(todos.filter((todo) => todo.id !== id));
},
[todos]
);
const onToggle = useCallback(
(id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, checked: !todo.checked } : todo
)
);
},
[todos]
);
return (
<TodoTemplate>
<TodoInsert onInsert={onInsert} />
<TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
</TodoTemplate>
);
}
export default App;
8. useRef Hook
id값은 렌더링되는 정보가 아니기 때문에 useState가 아닌 useRef를 사용한다.
화면에 보이지도 않고 이 값이 바뀐다고 해서 컴포넌트가 리랜더링 될 필요가 없기 때문!
단순히 새로운 항목을 만들 때 참조되는 값이면 useRef 고려하기!!
function App() {
const [todos, setTodos] = useState([
{
id: 1,
text: "한라봉으로 주스 만들어 먹기",
checked: true,
},
{
id: 2,
text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
checked: true,
},
{
id: 3,
text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
checked: false,
},
]);
const nextId = useRef(4);
const onInsert = useCallback(
(text) => {
const todo = {
id: nextId.current,
text,
checked: false,
};
setTodos(todos.concat(todo));
nextId.current += 1;
},
[todos]
);
9. 할일 목록 추가 기능 핵심
const [todos, setTodos] = useState([
{
id: 1,
text: "한라봉으로 주스 만들어 먹기",
checked: true,
},
{
id: 2,
text: "맥북 컴퓨터 삼성 컴퓨터로 바꾸기",
checked: true,
},
{
id: 3,
text: "펩시 제로 콜라 편의점에서 성이님 돈으로 마시기",
checked: false,
},
]);
const nextId = useRef(4);
const onInsert = useCallback(
(text) => {
const todo = {
id: nextId.current,
text,
checked: false,
};
setTodos(todos.concat(todo));
nextId.current += 1;
},
[todos]
);
10. 할일 목록 삭제 기능 핵심
const onRemove = useCallback(
(id) => {
setTodos(todos.filter((todo) => todo.id !== id));
},
[todos]
);
11. 할일 목록 수정 기능 핵심
const onToggle = useCallback(
(id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, checked: !todo.checked } : todo
)
);
},
[todos]
);
'📖 리액트 > 리액트를 다루는 기술' 카테고리의 다른 글
13장 리액트 라우터로 SPA 개발하기 (0) | 2022.02.08 |
---|---|
11장 컴포넌트 성능 최적화 (0) | 2022.02.07 |
9강 컴포넌트 스타일링 (0) | 2022.01.27 |
8장 Hooks (2) | 2022.01.26 |
7장 컴포넌트의 라이프사이클 메서드 (0) | 2022.01.25 |