yarn으로 react 설치 후 파일 내용을 수정하면 eslint가 react-app을 찾을 수 없다며 오류가 발생합니다. 저는 yarn을 처음 설치 했을 때 부터 생긴 오류였고 이를 해결하기 위해 node 재설치 등 여러가지 방법을 해보았으나 해결이 되지 않았습니다. [eslint] Failed to load config "react-app" to extend from. 결론부터 얘기하면 이 오류는 eslint, eslint-config-react-app 패키지를 삭제 후 재설치 하여 해결하였습니다. eslint, eslint-config-react-app 삭제하기 yarn remove eslint eslint-config-react-app eslint, eslint-config-react-app 재설..

🌊 React Custom Component 과제 오늘은 리액트 hook을 사용하여 Custom Component 과제를 하였습니다. Bare minimum Requirement로 Modal, Toggle, Tab, Tag를 구현 과제가 나왔고 Advanced Challenge는 내일 도전해볼 생각입니다. 오늘 구현한 Modal, Toggle, Tab, Tag를 소개하고 코드 작성시 고려했던 점을 리뷰하려 합니다. Modal export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 10..

🌊 비동기 프로그래밍 const foo = () => {}; const bar = () => {}; foo(); bar(); 위 예시 이미지와 코드를 보면 foo 함수와 bar 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. 함수가 실행되려면 '함수 코드 평가 과정'에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. 실행 컨텍스트 스텍에 함수 실행 컨텍스트가 푸시 되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. (들어온 순서대로 스택에 들어가 실행된다.) 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는..

🌊 Hook - useCallback : useCallback은 useMemo와 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다. 컴포넌트 내에서 함수를 선언하면 컴포넌트가 리렌더링 될 때 마다 새로 만들어진 함수를 사용하게 되는데, 대부분은 문제 없지만 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 useCallback을 사용하여 최적화한다. 즉, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useCallback import React, { useCallback, useMemo, useState } from 'react'; const getAverage = (numbers) => { console.log('평균값 계산 중....

🌊 Hook - useMemo : useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요는 없으며, 객체가 아니라 문자열이나 숫자열이어도 상관 없다. { type : 'INCREMENT', // 다른 값들이 필요하다면 추가로 들어감 } useMemo 리스트에 숫자를 추가하고 추가된 숫자들의 평균을 보여주는 함수형 컴포넌트 import React, { useState } from 'react'; const getAverage = (numbers) => ..

🌊 Hook - useReducer : useReducer는 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. Reducer는 현재 상태, 그리고 업데이트를 위한 필요한 정보를 담은 액션 값을 전달받아 새로운 상태로 반환하는 함수이다. Reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state, action){ return {...}; // 불변성을 지키면서 업데이트한 새로운 상태를 반환한다. } 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요..

🌊 Hook - useEffect : useEffect는 렌더링될 때 마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. useEffect import React, { useState } from 'react'; export default function Info() { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(() => { console.log('렌더링 완료'); console.log({ name, nickname }); }); const onChangeName = (e) => { setName(e.target.value); }; const onChangeNickname..

🌊 Hook - useState : useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. useState import React, { useState } from 'react'; export default function Counter() { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다.{' '} setValue(value + 1)}> setValue(value - 1)}> ); } useState는 다음과 같이 사용합니다. const [value, setValue] = useState(0); useState함수의 파라미터에는 상태의 기본값, 초기값을 넣어줍니다. 현재 0인..