(수근수근)

1편에서 pure component에 대해서 이야기 했다. pure component란 PureComponent is similar to Component but it skips re-renders for same props and state로 리액트 공식 사이트에서 설명되어있다. state와 prop가 동일하면 리렌더링을 건너뛰는 컴포넌트라는 것이다. 리액트 최적화 툴 중 하나인 React.memo는 사용자가 해당 컴포넌트가 pure component임을 인지하고 사용하는 최적화 함수이다. React.memo React.memo pure component를 최적화하는 escape hatch function Decoration() { return ( ⛵️ ); } const PureDecoration =..

최적화가 사실 몸으로 와닿은적이 아직 없다. 따라서 공부도 제대로 안한 경향이 있고, 단순히 리렌더링 안해도되는 것은 최적화 툴(useMemo, useCallback)을 쓰면된다 이정도의 지식이었는데, 제대로 알지도 못하는데 어떻게 쓸 수 있는가 하는 생각이 들었고 좋은 강의(josh)를 통해서 해당 툴이 리액트에서 필요한 이유를 좀 더 깊게 이해할 수 있었다. 일단 왜 해당 같은 툴이 만들어졌을까? 리액트는 자동으로 최적화 할 수 없었을까? 최적화 툴이 만들어진 이유는 다음과 같다. 리액트는 불필요한 부분에도 리렌더링이 되기 때문이다. 리액트 리렌더링의 기본적인 규칙에 대에서 봐보자! The Basic rule 모든 리렌더링은 state value 변경으로 시작되고, 이는 유일한 트리거입니다. 따라서 ..

Async Effect Gotcha gotcha : 프로그래밍에서 문제는 문서화된 대로 작동하지만 호출하기 쉽고 결과가 예상치 못하거나 불합리하기 때문에 직관에 반하고 실수를 거의 유발하는 시스템, 프로그램 또는 프로그래밍 언어의 유효한 구성입니다. 모두 알다시피, await키워드를 사용할 때, async함수 내부여야만 사용할 수 있다. 리액트를 개발하면, useEffect내부에서 비동기 함수를 사용해야하는 일이 꽤나 빈번하다. 특히 컴포넌트가 mount될 때, api를 불러오고 싶은경우가 많을 것이다.(react query, swr을 처음부터 쓰면, 알아서 해줍니다..) 예를 들어보자, React.useEffect(async () => { const response = await fetch(ENDPOI..

문제 - 현재 react-datepicker library를 활용하고 있는데 input에 날짜를 입력할 때 자동으로 MM-dd-yyyy형태로 작성되게 하고싶은데 mmddyyyy로 들어감 - locale에 따라 자동으로 formating형태에 따라 대쉬를 넣어주고 싶음 해결방법 - datepicker에서 열어둔 props의 customInput을 활용한다. - 자동으로 masking을 도와주는 라이브러리(react-text-mask) 사용 (https://github.com/text-mask/text-mask/tree/master/react) 필요한 부분 코드만 작성 (나머지 불필요한 부분들은 삭제함) - locale에 따라 다르게 mask부분의 배열을 변경해주면 됩니다. import ReactDatePi..

리액트는 클래스형 컴포넌트에서 많은 기능을 수행했다. 하지만 리액트는 함수형 컴포넌트에서도 클래스형의 컴포넌트의 기능을 지원하기 위해, 리액트 v16.8에서는 Hool이라는 개념이 도입되었다. 기본적인 리액트 내장훅에 대해서 공부해보자! ⭐useState 상태관리를 위한 Hook const [value, setValue] = useState(초기값) ; 코드 상단에서 import로 useState를 불러온다 useState는 한 변수만 사용할 수 있을까요? 당연히 아닙니다... 클래스 상태관리를 해야하는 변수가 하나라면 생각만 해도 너무 힘듭니다! 리액트가 이를 모를리 없죠! 따라서 여러번 사용이 가능합니다! ⭐useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 발생하는 작업입니다...

다음 글은 아래의 유튜브 영상을 보고 정리한 내용입니다. code : https://github.com/NikValdez/ChatAppTut 출처: www.youtube.com/watch?v=CgV8omlWq2o react - chatting -app 목차 전체 프로젝트 구조 socket.io 모듈 및 function server 소스 Client 소스 REACT STUDY function vs class useEffect & useState cors Error 해결 추가) room 나누기 전체 프로젝트 구조 다음은 전체 프로젝트 구조입니다. Client와 Server가 소켓통신을 통해서 서로 통신을 주고 받습니다. chat 폴더 : Client 역할 Server 폴더 : server역할 Socket.i..