crabLab

많은 데이터 렌더링하기 function createBulkTodos() { const array = []; for (let i = 0; i { const nextTodo = { id: nextId.current, text, checked: false, }; setTodos([...todos, nextTodo]); nextId.current += 1; }, [todos], ); 함수형 업데이트 사용한 setTodos 두 번째 인자에 관심사를 빼도 된다. useCallback 으로 재사용하도록 만들었지만, 결국 todos를 지켜보아야하는 건 같기 때문에 todos가 변할 때마다 함수가 새로 생성된다. 이걸 지우고 setTodos에서 화살표 함수로 업데이트를 어떻게 할 건지에 대한 업데이트 함수를 만들면 함수..

컴포넌트 구조 |App| ㄴ|TodoTemplate| ㄴ|TodoInset| ㄴ|TodoList| ㄴ|TodoListItem| 프로젝트 및 라이브러리 $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass classnames react-icons sass를 사용할 예정이므로 node-sass를 설치해 주었습니다. classnames는 나중에 조건부 스타일링을 좀 더 편하게 하기 위해 설치했습니다. prettier 설정 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } index.css 수정..

css : 기본 방식 Sass : CSS 전처리기. CSS Module : CSS 클래스 충돌하지 않도록 고유한 이름 자동 생성 Styled-components : 스타일을 JS 파일 안에 내장 일반 CSS CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것 이름을 지을 때 특별한 규칙을 사용하여 짓는 것 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지할 수 있죠.(예: App-header) 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식 예를 들어 .card__title-primary CSS Selector를 활용하는 것입니다. CSS Selector를 사용하면 CS..

useMemo 컴포넌트 내부에서 발생하는 연산 최소화 실습 코드는 insert외에 input 내용 수정되어도 getAverage함수가 호출됨 useMemo 사용하면 특정 값이 바뀌었을 때만 연산을 실행, 원하는 값이 바뀌지 않았다면 이전 연산 결과를 다시 사용 Memoization memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 함수형 컴포넌트에 memoization 적용 아래 컴포넌트는 prop으로 넘어온 x와 y 값을 compute 함수에 인자로 넘겨서 z 값을 구한 후..

Hooks란? Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. useState useState는 가장 기본적인 Hook 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재 0을 넣어 주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미 이 함수가 호출되면 배열을 반환하는데요. 그 배열의 첫 번째 원소는 상태 값, 두 번째 ..

라이프 사이클 메서드의 이해 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기 가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프 사이클 : 페이지에 렌더링되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지 이럴 때.. 처음으로 렌더링할때 어떤 작업을 처리해야할 때 업데이트 하기 전, 후에 어떤 작업을 처리해야 할 때 불필요한 업데이트를 방지할 때 3가지 카테고리와 그 메서드 👀 마운트(mount) DOM이 생성되고 웹 브라우저상에 나타나는 것 컴포넌트가 생성 될때 발생하는 생명주기들을 알아봅시다. ☑️ constructor 컴포넌트 새로 만들 때..

map() 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. arr.map(callback, [thisArg]) 이 함수의 파라미터는 다음과 같습니다. callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지입니다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): callback 함수 내부..

DOM 요소의 id HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다. ref를 사용하는 경우 DOM을 꼭 직접적으로 건드려야 할 때 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보겠습니다. 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 8장에서 Hooks를 배우면서 알아볼 것입니다. DOM을 꼭 사용해야 하는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 콜백 함수를 통한 ref 설정 {this.input=ref}} /> createRef를 통한 ref 설정 class RefSample extends C..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다. 리액트에서 이벤트 사용시 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다 함수 전달에 좋은 화살표 함수 사용 렌더링 부분 외부에 미리 만들어서 전달 가능 3. DOM 요소에만 이벤트를 설정할 수 있습니다 html 태그 같은 DOM요소에만 설정 가능 컴포넌트에는 설정이 안된다. 클래스형 컴포넌트 React에서는 DOM엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될때 리스너를 제공하면 된다. 이벤트핸들러를 클래스의 메서드로 만들고 이를 ..

state란? 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다. props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다. 클래스형 컴포넌트의 state 반드시 super(props)를 호출해 주어야 합니다. this.state 값에 초깃값을 설정해 주었습니다. 컴포넌트의 state는 객체 형식이어야 합니다. render 함수에서 현재 state를 조회..