책 읽다가 코딩하다 죽을래

const onChangeEvent = (e) => { setInputValue(e.target.value); } return( ) input onChange이벤트는 input의 current.value가 달라질 때마다 일어나는 이벤트이다. 우리는 위의 코드를 이용해서 input에 들어있는 value를 state에 저장할 수 있다. 네이버의 검색엔진 또한 onChange 이벤트를 이용해 검색바 밑에 연관검색어를 추천해준다. 그런데 value가 달라질 때마다 onChange 이벤트를 발생하게 되면 자원낭비와 부자연스러운 연출이 일어난다. 우리는 위에 사진처럼 감사합니다 를 입력했을 때 정확히는 감사합니다의 연관검색어를 원하는데 value값이 달라질때마다 이벤트를 일어나게 한다면 ㄱ -> 가 -> 감 -> ..

React-Redux를 더욱 쉽게 관리하게 만들어주는 immer, redux-action에 대해 배워보자 모듈 설치 방법 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions npm i redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions 각 모듈에 대한 설명 redux-logger : 웹상에서 redux의 action이 일어날 때마다 콘솔에서 action 내역을 이쁘게 보여주는 모듈 이런 식으로 action이 일어날..

Redux는 전역 상태 관리를 편히 사용할 수 있게 해주는 라이브러리입니다. 목차 1. React에서 Redux를 사용하는 이유 2. Redux 구조 3. Redux 사용법 1. React에서 Redux를 사용하는 이유 더보기 에서 컴포넌트 내에서의 데이터는 state로 해결된다. 그럼 컴포넌트 간에서는? props가 있다. 그렇지만 되게 제약사항이 많다. props는 양방향이 아닌 일방향이다. 부모가 자식에게 props를 줄 수 있지만 부모에게 받은 props를 수정할 수 없을뿐더러 애초에 부모에게 데이터를 줄 수 있는 수단이 없다. 게다가 만약 컴포넌트 관계가 A->B->C->D와 같고 A의 데이터를 D에게 전달하려면 B와 C를 거쳐야 하고 또한 데이터 변화가 없는 B와 C도 필요 없는 리랜더링 일어..

라우팅이란 페이지를 나눠주는 것이다. 우리가 React로 작업을 할 때 create-react-app을 이용하든 웹팩을 이용하든 html 파일은 index.html 하나뿐이라는 것을 알 것이다. 이렇게 어플리케이션 안에 html 파일이 하나밖에 존재하지 않는 경우 우리는 이것을 SPA(Single Page Application)이라 부른다. 이렇게 html파일이 하나가 있으면 좋은 점은 사용성이다. 페이지를 이동하거나 웹사이트 내에 정보가 달라지게 되면 리다이렉트(새로고침)가 일어나게 되는데 만약에 페이지가 여러개이면 html 파일이 수시로 교체가 되고 서버에서 주는 데이터도 바뀌다 보니까 상태 유지도 어렵고 바뀌지 않은 부분까지 새로 불러오게 되니 비효율적입니다. (ex : facebook에서 좋아요 ..

오늘은 setState의 대체 함수인 useReducer에 대해 배워보겠다. const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer의 원형은 이렇게 생겼으며 첫 번째 인자인 reducer는 action이며 두 번째 인자인 initalArg은 초기 state 값이다. 세 번째 인자는 state를 지연시켜서 설정하는데 쓰이는 인자인데 첫 번째 인자와 두 번째 인자만 알아도 useReducer를 사용할 수 있으니 이번 수업에는 세 번째 인자는 다루지 않을 것이다. 우리는 오늘 회원가입 폼을 활용함으로써 useReducer를 실습해볼 것이다. 일단 회원가입 폼을 만들어보자 일일이 다 만들 생각은 없고 antd design에서 폼을 ..

모든 생명은 탄생하며 시간이 지나면 죽게 된다. 객체 프로그래밍의 객체들도 똑같다. 생성자를 통하여 필요한 메모리를 할당하고 객체의 역할이 끝났으면 소멸자를 통하여 메모리를 반환한다. 컴퓨터의 자원은 한정적이라 역할이 끝난 모든 것들은 메모리를 반환해야 메모리 누수 문제가 생기지 않으며 더 좋은 성능을 발휘할 수 있다. 컴포넌트형 프로그래밍 React에서도 마찬가지이다. 컴포넌트의 생기는 시점에 메모리를 할당받게 되고 역할이 끝나 사라지는 시점에는 메모리를 반환해야 한다. 이러한 컴포넌트의 생명주기를 다루는 것이 바로 componentDidMount, componentDidUpdate, componentWillUnmount 이다 componentDidMount은 컴포넌트가 트리에 삽입된 직후에 호출되며(..

react의 props는 부모가 자식에게 유전자를 물려주는 기능이라고 보면 된다. 여기서 부모와 자식관계는 어떤 하나의 컴포넌트가 다른 컴포넌트를 호출했다면 호출한 컴포넌트는 부모 호출받은 컴포넌트는 자식 으로 비유되며, 이 때 props는 호출한 컴포넌트와 호출받은 컴포넌트의 데이터 송수신을 하는 수단이라고 생각하면 된다. 간단한 실습으로 props을 알아보자 import React, { useState } from 'react' function Father() { const [DNA, setDNA] = useState(""); const onChangeInput = (e) => { setDNA(e.target.value); } return ( 나는 무슨 아빠인가요 : 안녕 나는 {DNA} 아빠 ) }..

오늘은 React로 instagram의 좋아요 버튼을 만들어 볼 생각이다. React의 기초내용과 setState의 개념을 다루니 무지 쉬울 것이다. 이 글에선 웹팩을 다루지 않으니 리액트의 기본셋팅은 미리 한 후에 보기를 권장한다. create-react-app을 사용해도 괜찮다. 하트의 디자인은 Ant-Design의 icon을 빌려올 것이다. 이 두가지를 사용할 것이며 사용법을 몰라도 괜찮다. 다 설명해줄 것이다. 사용법을 알거나 문서를 읽을줄 알면 아래의 사이트에 직접 들어가서 알아보는 것도 좋다. Ant-Design-icon Document바로가기[클릭] 일단 폴더구조는 다음과 같다. 다시 한 번 말하지만 이 강의에선 웹팩이나 초기 리액트셋팅을 다루지 않는다. 즉 client.jsx(또는 clie..