React

[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..

[React] 리액트 useState 개념

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

[React] 리액트 프로젝트 시작 세팅하기(CRA)

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * 리액트 프로젝트를 만들기 위한 준비물 Node.js vscode 리액트 프로젝트를 만드는 방법은 간단합니다. Node.js와 에디터만있으면 됩니다. Node.js는 LTS(Long Term Support) 버전으로 다운받아줍니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 에디터는 가장 유명하고 사용하기 쉬운 vscode를 쓰겠습니다. 본인의 운영체제에 맞게 다운받아줍니다. https://code.visualstudio.com/ Visual St..

[React] React.js 리액트 특징! 간단하게 알아보자

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * 리액트 리액트는 2013년 facebook에서 발표한 UI를 만들기 위한 오픈소스 자바스크립트 라이브러리입니다. 오픈소스이기 때문에 facebook과 많은 개발자들에 의해 지속적으로 업데이트되고 있습니다. 따라서, 리액트는 풍부한 라이브러리를 보유하고있습니다. 그렇다면 기존 JavaScript와 비교해서 리액트로 개발하면 어떤 점이 좋을까요? JS는 기본적으로 DOM을 이용해서 요소를 참조하고(예를들어 document.querySelector) 값을 추출하기때문에 만약 해당 요소의 id값을 참조하고있었는데 id값이 변경된다면 사용하고있는 코드를 전부 고쳐야하기 때문에 유지보수가 어렵게됩니다. 하지만 리액트..