전체 글

[a-coha] 모달 창 상태 제어 문제

목표 원했던 구현은 해당 아이템을 클릭했을 때 모달창이 뜨고, 모달 창을 제외한 다른 곳을 클릭하면 모달 창이 사라지는 것. 문제 상황 처음 클릭 했을 때는 모달 창이 뜨지만 다른 곳을 클릭해도 모달 창이 닫히지 않는다. 모달 창의 open 과 close를 recoil boolean 상태값으로 관리했는데, 어째서인지 동작하지않는다. // userList/index.tsx ... const onClickHandler = (e:React.MouseEvent) => { setIsUserModalOpen(true); }; ... return ( {channelUsers && channelUsers.map((member: ChannelUser, i: number) => { const isOnUser = onUse..

pre-onboarding setting 과정

1. client / server 폴더 나눔 yarn create react-app . --template typescript client/src/components 와 styles 폴더 만듬 2. .prettierrc.json 설정, tsconfig.json - baseUrl 설정 include는 import시 포함 할거냐 말거냐. 설정 후 꼭 다시 yarn start 해볼 것. ( 바로적용 안됨 ) 3. client - emotion을 쓰기 위해 세팅 시작 yarn add @emotion/react global css를 적용하기 위해 import { css } from '@emotion/react' 하고 reset css export 함 마찬가지로 일부 공통 스타일 적용을 위해 import { The..

테스팅 그게 뭐죠? (feat. Jest, react-testing-library)

이번에 리액트 컴포넌트 테스팅에 대해 공부하면서 알게된 내용들을 정리해보려 한다. 코드 테스트가 필요한 경우 코드 작성 후 원하는대로 동작하는지 확인할 때 버그 발생 시, 어떤 상황에서 버그가 발생하는지 알기위해 (ex array가 empty일때만 버그일경우) 코드 리팩토링 후 제대로 동작하는지 확인할 때 테스팅 장점 미연에 에러 방지 가능 TDD(Test Driven Development) 등의 방법론을 적용해서 생산성을 향상시킬수있음 무조건 실패하는 케이스를 미리 작성하고, 이걸 하나씩 success시켜가면서 완성시키는 코드 작성 방법 테스트가 늘어나면서 테스트 코드 자체가 구현 코드에 대한 문서가 됨 테스트가 용이하게 코드를 작성하므로써 코드 품질과 코드의 신뢰성을 높힌다.(단위별로 나눠 작성) -..

[React] 리액트 useState 개념

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * Hook은 React 16.8에 새로 추가된 기능입니다. class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. React 공식문서에 나와있는 Hook에 대한 설명입니다. 여기서 눈여겨 볼 부분은 class를 작성하지 않고도! 라는 부분입니다. Hook이 등장하기까지 5년동안 초기 React 개발자들은 State(상태)관리를 하기위해선 class 문법으로 컴포넌트를 만들어서 사용해야 했습니다. 하지만 Hook의 등장으로 함수형 컴포넌트에서도 상태관리가 가능하게 된 것이죠! State를 관리해야 하는 상황을 생각해보면, 1. 카운터 컴포넌트를 생성했다. ↓ 2. 카운터..

[React] 리액트 Props / State의 개념과 차이점

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * Props 와 State에 대해 알아보기 리액트로 만들어진 페이지는 크게 두 가지 로직으로 나눈다고 볼 수 있습니다. UI를 구성하는 컴포넌트 로직 UI 컴포넌트의 상태와 그 상태를 변경하는 로직 Props 와 State는 2번에 해당합니다. 만약 브라우저에 접속한 사용자가 특정 버튼을 클릭할 때 마다, 브라우저에 클릭 횟수를 실시간 반영해서 보여주고 싶다면, State를 사용해서 클릭 횟수를 업데이트해서 브라우저에 반영해줘야 합니다. 사실 State(상태 관리)는 유일하게 클래스 컴포넌트에서만 할 수 있었습니다. 그래서 개발자들은 함수형 컴포넌트로 로직을 구성하다가 State 관리가 필요하다고 생각되면 ..