React.js (19) 썸네일형 리스트형 React(리액트): ESLint - 자바스크립트 문법 검사 도구(vscode ESLint) 이번에는 ESLint라는 도구에 대해서 알아보자. 이 도구는 자바스크립트 문법을 검사해줄 수 있는 도구인데, 기본적인 자바스크립트 문법을 검사해주는 것을 떠나서 정말 다양한 커스텀 규칙들을 설정할 수 있다. 이전에 학습했던 Prettier 같은 경우는 따옴표, 들여 쓰기, 세미콜론, 라인길이와 같은 모양만 신경 쓰고 자동으로 고쳐 주는 것에 중점이 되어있다면, ESLint는 Prettier에서도 커버하는 코드 스타일을 포함해서 정말 다양한 옵션들이 있다. 공식 홈페이지에서 규칙들을 확인해볼 수 있다. 렌치 모양이 있는 규칙들은 ESLint를 통해서 바로 고칠 수 있는 규칙이다 몇 가지 규칙들을 알아보자. max-params라는 규칙은 코드에 함수를 작성하게 될 때 파라미터의 개수를 제한시키는 작업을 한다.. React(리액트): 리액트에서 Prettier 사용하기(vscode에서 prettier사용) 리액트 개발을 조금 더 편하게 할 수 있게 해주는 도구들에 대해서 알아보자. 첫 번째로 알아볼 도구는 'Prettier'인데 자동으로 코드의 스타일을 관리해주는 도구이다. 예를 들어 문자열을 표현할 때 작은따옴표를 쓸지, 큰 따옴표를 쓸지 또는 코드의 뒤에 ;(세미콜론)을 붙일지 말지 들여 쓰기는 얼마나 할지와 같은 것들을 관리해 줄 수 있다. 이 Prettier의 특징은 코드의 스타일을 사용자의 마음대로 쉽게 커스터마이징 할 수 있다는 점이다. 오른쪽에 나와있는 옵션들을 하나하나 커스터마이징 해줄 수 있다. Prettier는 자바스크립트 뿐만 아니라 HTML, CSS 코드의 스타일도 관리할 수 있고 React, Angluar, Vue 등의 라이브러리도 지원해주기 때문에 굉장히 사용성이 좋다. Prett.. React(리액트): class형 컴포넌트(클래스형 컴포넌트), state와 setState 이번에 다루어볼 주제는 class형 컴포넌트이다. 우리가 기존에 컴포넌트를 만들 때는 함수형 컴포넌트로 만들어왔다. class형 컴포넌트는 컴포넌트를 선언하는 또 다른 방식이다. 하지만 class형 컴포넌트는 요즘 잘 사용하지 않는다. 그래도 알아보도록 하자. 잘 사용하지 않더라도 알아둘 필요가 있는 이유는 나중에 class형 컴포넌트를 사용하는 프로젝트를 유지 보수하는 일이 생길 수도 있기 때문이다. 그리고 함수형 컴포넌트 + Hooks로 못하는 작업이 두 개 정도 있긴 하다. 앞으로 새로운 컴포넌트를 만들 때에는 함수형으로 만드는 것이 맞고, class형 컴포넌트는 꼭 필요한 경우이거나, 예전 프로젝트를 유지 보수할 때 사용하는 것이 옳은 방법이다. Hello.js function Hello({ co.. React(리액트): immer 라이브러리 사용한 불변성 관리 이번에 학습할 내용은 'immer'라는 라이브러리를 사용해 더 쉽게 불변성을 지키는 방법이다. const object = { a: 1, b: 2 }; object.b = 3; 다음과 같이 object라는 객체가 있다고 가정해보자. 우리가 리액트에서 배열이나 객체를 업데이트해야 할 때에는 다음 코드처럼 값을 직접 수정하는 형태의 코드는 불변성을 깨뜨리는 형태의 코드이다. const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 } 그 대신에 새로운 객체를 만들고 spread 연산자를 사용해서 기존의 값을 집어넣고 새로운 값을 덮어쓰는 방식이 올바른 방식이다. 이렇게 해야 나중에 컴포넌트가 제대로 리 렌더링 되고 컴포넌트 최적화도 수행할 수 있.. React(리액트): Context API를 사용한 전역 값 관리 이번에는 Context API를 사용해 리액트에서 전역적인 값을 관리하는 방법에 대해 알아보자. App.js const onToggle = useCallback(id => { dispatch({ type: 'TOGGLE_USER', id }); }, []); const onRemove = useCallback(id => { dispatch({ type: 'REMOVE_USER', id }); }, []); return ( 활성 사용자 수: {count} ) 이전에 구현했던 App 컴포넌트를 살펴보면 App 컴포넌트 내부에서 'onToggle'과 'onRemove'가 구현된 다음, 이 두 가지 함수가 UserList 컴포넌트에게 전달이 되는 구조이다. UserList.js import React from .. React(리액트): 커스텀 Hook 만들어 사용하기 이번에는 Custom Hook을 만드는 방법에 대해서 알아보자. const onChange = (e) => { const {name, value } = e.target; setInputs({...inputs, [name]: value}); } 컴포넌트를 만들다 보면 가끔씩 반복되는 로직들이 발생한다. 다음과 같이 input을 관리하는 코드는 꽤나 많이 작성하게 될 수 있는 코드다. input을 관리하려면 'e.target' 안에 있는 name과 value를 읽어서 이를 참조해 어떤 새로운 상태를 설정해야 하기 때문이다. 이러한 상황에서는 우리가 custom Hook을 만들어 사용할 수 있다. 즉, 우리만의 Hook을 만든다는 소리이다. 리액트에 내장되어있는 useEffect, useState, useRe.. React(리액트): useReducer (컴포넌트 상태 관리, 업데이트) 이번에는 useReducer라는 Hook에 대해 알아보자. 이전에는 컴포넌트의 상태를 업데이트해야 할 때는 useState를 사용해서 새로운 상태를 설정해주었는데 useState 말고 useReducer를 사용해서도 상태를 업데이트해줄 수 있다. 이 둘의 차이점에 대해 살펴보자. 먼저 useState는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 상태를 업데이트해주는 반면에 useReducer는 'action'이라는 객체를 기반으로 상태를 업데이트한다. 여기서 'action' 객체는 업데이트할 때 참조하는 객체이다. useReducer라는 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키는 것이 가능하다. 심지어 다른 파일에 작성 후 불러올 수도 있다. 여기서 redu.. React(리액트): 최적화 함수들 useMemo, useCallback, React.memo useMemo 이번에는 'useMemo'라는 Hook을 사용해서 이전에 연산된 값을 재사용하는 방법에 대해서 알아보자. 이 Hook 함수는 주로 성능을 최적화해야 하는 상황에서 사용한다. 이전 글에서 만든 컴포넌트들에 이어서 만들어보도록 하겠다. App.js 컴포넌트의 users 배열에서 active 값이 true인 객체의 수 ('계정명'의 글자가 초록색)를 표시하는 함수를 만드는 것을 예제로 하겠다. App.js function countActiveUsers(users){ console.log('활성 사용자 수를 세는중....'); return users.filter(user=> user.active).length; } App.js의 맨 윗부분에 작성해준 코드이다. 이 함수는 users배열을 파라미터로.. 이전 1 2 3 다음
