Frontend/React

React 의존성 배열 🌱

리액트의 useCallback, useEffect등을 사용할 때 의존성 배열을 받게 됩니다. 이 배열의 역할은 무엇인가요? 의존성 배열은 shallow equal, deep equal중 무엇을 하게 되나요? 얕은 비교(Shallow Equal)와 깊은 비교에 대해서 설명해주세요. 의존성 배열의 역할은 배열안에 포함된 값의 변화를 감지하여 callback의 경우에는 함수의 재정의, effect의 경우에는 함수를 재실행 합니다. 이때 의존성 배열의 변화탐지는 shallow equal을 하게 됩니다. (리액트 에서는 javascript의 Object.is 비교 알고리즘을 사용합니다.) 얕은 비교는 해당 변수의 메모리 주소 값이 변경됬는지만 비교합니다. 객체 일경우 key 값들의 세부 값까지는 비교하지 않습니다..

React 피드백 내용 정리

2022.02.10 - [Frontend/React] - 넘블챌린지 [Square Select Game] 이때 피드백 받은 내용과 모범답안을 기반으로 현재의 코드를 리팩토링 해보았다. 그때 얻은 인사이트를 기록해보려 한다. 아쉬운 부분에 대한 의견을 들었을때 머리가 띵했다... 이제까지 이런식으로 작성했었고 나는 계속 이런식으로 봐왔으니까 가독성이 좋다고 생각했었다..... 완전히 우물안의 개구리 였던것..... 인수인계 했을때 읽히기 쉬운 코드를 작성하자는 신념이 있었는데 내 코딩 패턴은 전혀 그러지 못했었던 것..... 만약 프로젝트가 조금만 더 규모가 커졌었더라면 저 state와 handler를 정의하는 부분은 감당이 안되고 어디를 어떻게 바꾸어야 하는지를 도저히 알수가 없었을 것이다.... (쉽지..

React useLayoutEffect

useEffect로 전달된 함수는 레이아웃 배치와 그리기를 완료한 후 발생합니다. 이렇게 지연시켜서 실행하는 이유는 useEffect에서 실행하는 동작으로 인해 브라우저에서 화면을 업데이트 하는것을 차단해서는 안되기 때문입니다. 그래서 아래와 같은 현상이 발생할 수도 있습니다. 발생할 수도 있다는 것은 고쳐야 할 때도 있다는 것을 의미한다고 생각합니다. 그래서 등장한 것이 useLayoutEffect 훅입니다. 위와 같은 사용자 경험이 발생하는 경우를 위하여 등장하였습니다. useLayoutEffect 훅은 dom이 화면에 그려지기 전에 업데이트를 해줍니다. 동작은 useEffect와 동일하다고 이해하고 동작하는 시점만 화면에 그리기전 useEffects는 dom 요소들이 화면에 그려지고 난후 반영된다고..

제어 컴포넌트 vs 비제어 컴포넌트

react에서 제어 컴포넌트, 비제어 컴포넌트를 고려하여 form을 다루어야 하는 경우가 있었다. 제어 컴포넌트, 비제어 컴포넌트에 대한 개념이 없었고 이전에 formik을 다루었었던 경험이 있어서 습관적으로 제어 컴포넌트 형식으로 구현을 했었다. 그래서 제어, 비제어 컴포넌트에 대해 알아보려고 한다. 제어 컴포넌트 값이 바뀔때마다 매번 렌더링을 하게 된다. (좀 더 React스럽다 라고 언급이 되는것 같다) 코드의 내용을 보면 useState를 통해 상태값 하나를 추가해주었고 이는 Input의 value값이 된다. input의 onChnage 핸들러를 추가하여 input 입력값이 변경될때마다 상태를 업데이트 해주었다. 상태가 업데이트 되었으므로 렌더링이 일어난다. 매번 상태를 업데이트 해주므로 화면에 ..

React twice render

TLDR: 1. React의 strict 모드를 이용하면 render가 두번 이상씩 될 수 있다. 2. 이는 개발환경에서만 발생한다. 첫 시작은 이게 아니었다.... 처음의 의도와 기획은 render가 되는 것을 어떻게 count 할 수 있을까에 대한 호기심 이었다. 여정은 다음과 같다. 1. ref를 주고 받음에 치였고 2. forwardRef && typescript, useRef에 치였고 3. React.Strictmode에 치였다. 3개의 과정을 알아보고 인사이트를 찾아보자 오늘의 주제는 1번과 2번이 아니다. 1번과 2번은 빠르게 훑고 갈것이다. 1번에서는 ref를 부모에서 주고 자식에서 카운팅을 하나씩 올리려 했었다. 2번에서는 forwardRef를 통해 ref를 이름의 변경없이 보내서 자식에..

cra + typescript + jest

최근에 react로 만든 어플리케이션에서 jest를 적용해야 했었습니다. 적용하면서 막혔던 부분들에 기록해 두려 합니다. 요약순서 1. 필요 라이브러리 설치 2. package.json 수정 2. jest config.js 설정 3. test 파일 작성 4. test 실행 cra with typescript 로 생성한 프로젝트에서 1. 필요 라이브러리 설치 yarn add -D jest @types/jest ts-jest jest : javascript 테스트 프레임워크 입니다. @types/jest : jest의 타입 정의를 포함하고 있는 라이브러리 입니다. ts-jest : typescript로 작성된 프로젝트들을 테스트 할 수 있게 해주는 typescript 전처리 라이브러리 입니다. 2. pack..

넘블챌린지 [Square Select Game]

넘블챌린지의 새로운 프론트엔드 챌린지를 하게 되었다. 큰 단위는 아니지만 짧은 스프린트로 뭔가를 계속 만들어가고 거기서 고민을 하고 있다는 것에서 긍정적이라 생각한다. 이번 챌린지를 하면서도 크고 작은 고민들을 했고 그 고민들에 대해 기록하려 한다. 프로젝트의 구현 영상은 위에 gif로 첨부를 해두었다 사각형이 여러개 나오고 그중 색깔이 다른 하나를 제한시간 안에 클릭하면 다음 stage로 넘어가게 된다. 색깔은 점점 구분하기 어려워 진다. (stage 17에서 어려움을 겪는 모습을 확인할 수 있다....) 주요 코드에 대한 설명 // App.tsx // ScoreBoard.tsx export default React.memo(ScoreBoard); // GameBoard.tsx export defaul..

cannot get /path

react + webpack(직접설정) 을 사용하여 개발을 하고 있었고 react-router-dom을 통해 프론트에서의 라우터를 관리해주고 있었다. 다른 문서 작성을 위해 테스트 하던중에 이상한 점을 발견했다. 해당 url 접근시 페이지가 없을 경우 404 페이지를 띄워주고 싶었는데 cra + react-router-dom을 이용한 프로젝트에서는 문서대로 처리가 가능했고 직접 webpack을 세팅해준 프로젝트에서는 위와 같은 화면이 노출되고 있었다. https://reactrouter.com/docs/en/v6/getting-started/overview#not-found-routes React Router | Overview Declarative routing for React apps at any ..

cra typescript 초간단 세팅

CRA(Create React App)에 typescript를 적용하고 eslint와 prettier까지 적용해보는 스크립트 입니다. [blah blah] -> 괄호안의 내용을 blah blah가 의미하는 것으로 변경하면 됩니다. npx create-react-app [projectName] --template typescript // typescript로 cra 수행 yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin yarn add -D eslint-plugin-react yarn add -D prettier eslint-config-prettier eslint-plugin-prettier yarn remove p..