profile
Junior Front-End Developer
post-thumbnail

[리액트] redux toolkit (RTK) 사용법

redux의 단점 redux의 store는 매우 복잡하다. redux를 유용하게 사용하기 위해 매우 많은 패키지 설치가 필요하다. 리덕스는 매우 많은 보일러 플레이트 코드를 필요로 한다. > redux-toolkit(RTK)는 이러한 문제점을 개선시켰다. redu

4일 전
·
0개의 댓글
·
post-thumbnail

[리액트] export default와 export의 차이

리액트로 개발할 때 하나의 파일에 하나의 컴포넌트만 있다면 다음과 같이 해당 컴포넌트 명으로 export한다.Test.js그러나 가끔씩 타인의 코드를 보거나 여러개를 내보내야할 때 export default가 아닌 named default로 내보낼 때가 있는데 두 개의

5일 전
·
0개의 댓글
·
post-thumbnail

[리액트] 리액트와 Nodejs를 사용하여 실시간 채팅 구현 #1

프론트엔드가 백엔드와 실시간으로 통신할 때 소켓 통신을 사용한다. > 백엔드 : Node.js -> 주로 socket.io를 사용 백엔드 프레임워크 : 스프링 -> 주로 sockjs + stomp 사용 이번 포스팅에서 프론트엔드는 리액트, 백엔드는 node를 사용

2022년 5월 30일
·
0개의 댓글
·
post-thumbnail

[리액트] useReducer란?

useReducer란? React의 상태관리를 위한 Hook중 하나이다. useState와 비슷하지만 컴포넌트와 컴포넌트 업데이트 로직을 분리할 수 있다는 장점이 있다. Context API로 전역 값을 관리할 때 사용되는 Hook이다. > useReducer 사용법

2022년 5월 17일
·
0개의 댓글
·
post-thumbnail

[리액트] useMemo 사용법

다음과 같이 사용자를 등록하고 전체 사용자 정보와 전체 사용자 수를 나타내는 코드가 있다. App.js 해당 화면에서 이름과 기분을 입력하면 inputs의 State가 변경되면서 App 컴포넌트가 Re-Rendering된다. const numberOfUser =

2022년 4월 12일
·
0개의 댓글
·
post-thumbnail

[리액트] useState vs useRef

아래에 App.js의 코드가 있다.아래 코드는 화면에 State의 값과 Ref값을 표시하고 각 값을 업데이트하는 버튼이 있다.App.js현재 상태현재의 state 값과 ref 값이 화면에 표시된다. State 올리기 버튼을 클릭State 올리기 버튼을 클릭하면 sta

2022년 4월 9일
·
0개의 댓글
·
post-thumbnail

[리액트] Input이 여러 개 일때 효율적으로 State 관리하기

리액트에서 Input이 여러 개 일때 상태관리하는 방법 이름, 아이디, 별명을 입력하는 회원가입 창이 있다. App.js ![] (https://velog.velcdn.com/images/navyjeongs/post/02dc909a-629c-46de-990b-2dd

2022년 4월 9일
·
0개의 댓글
·