react

[React] HOC(고차 컴포넌트) 함수형 예제

1. 개요 기술면접을 보았을때 HOC란 무엇인가?라고 물었을때 잘 모른다고 대답을 했었는데요, 살짝 찾아보니까 메인 다큐먼트에서는 클래스형 컴포넌트에서 사용되는 것이 있었습니다. 기술면접에서 물어볼 정도면 뭔가 중요한 내용이 있는게 아닐까 싶어서 HOC를 함수형으로 사용할 수 있는 방법을 찾아보았고, 어째서 HOC에서 물어보셨는지에 대해 깨닳게 되었습니다! 예제로 사용한 깃허브 주소입니다. https://github.com/kimdongjang/hoc_test GitHub - kimdongjang/hoc_test Contribute to kimdongjang/hoc_test development by creating an account on GitHub. github.com 2. HOC(Higher Or..

[React] useMemo와 useCallback의 차이

1. 개요 useMemo와 useCallback이라고 하는 hook 함수가 있지만 둘의 개념을 살펴보면 두 함수다 비슷한 역할을 가지고 있는 것 같아, 언제 어느 상황에 useMemo 또는 useCallback을 써야할지 판단을 하기 위해 정리를 해보려고 합니다. (심지어 useCallback 안에 useMemo를 쓰는 경우도 있었음) 2. Memoization 먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 이것을 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있습니다. 3. useMemo useMe..

[React] 렌더링(리렌더링)

1. 개요 React를 공부하면서 어떻게 보면 가장 기초이고, 가장 중요한 부분인데 사실 이제야 포스팅한다는 것은 이제까지 리액트를 잘못 사용해왔다는 반증이기도 한데... 조금 더 심도있게 리액트를 알아보기 위해서 렌더링이란 무엇이고, 렌더링의 조건이 어떻게 되는 건지 확인차 적어보려고 합니다. 2. 렌더링이란? 아래의 Welcome을 컴포넌트라고 부릅니다. (정확히는 함수 컴포넌트) function Welcome(props) { return Hello, {props.name}; } 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미합니다. 3. 렌더링 과정 3-1. React의 렌더링 기본적인 리액트의 렌더링 개념..

[React] 불변성이란? 불변성을 지켜야 하는 이유

1. 개요 React를 빠르게 배울 때 값을 변경할 때 useState를 사용해야 한다, 불변성을 유지해야 한다, immer를 사용해야 한다, spread 연산자를 사용해야 한다, 공식처럼 생각하고 있었는데 javascript의 메모리 구조에 대해 알아보면서 react의 리렌더링이 일어나는 과정이나 불변성의 진짜 의미는 무엇일지 찾아보다가 괜찮은 블로그를 발견해 요점만 정리해보려고 합니다. 2. javascript 메모리 구조 자바스크립트 엔진은 call stack과 heap memory 2가지 메모리 공간을 가지고 있습니다. 콜스택: 실행 중인 함수를 추적해 계산을 수행하고 지역변수를 저장하는 공간입니다. 이곳에 원시 타입들이 저장됩니다. 힙 메모리: 참조 타입들이 할당되는 곳입니다. 메모리 누수를 방..

[React] SEO 처리 하기

1. 개요 React는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)으로 동작합니다. 이때 React에서는 HTML 파일이 딱 1개뿐이고, 그 내용조차 서버에서 javascript를 받아서 렌더링하기 전까지는 빈 껍데기인 상태이기 때문에 검색 엔진에 노출되기가 어렵습니다. 따라서 SEO에 노출시키기 위해 html 내용을 미리 만들어야합니다. 2. pre-rendering pre-rendering이란, 빌드할때 미리 특정 페이지를 렌더링해서 html을 만들어 두는 것을 말합니다. 빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 됩니다. 다만, 빌드 시에는 정적 파일만 가져..

[React] SSR과 CSR(SPA) 차이

1. 개요 먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다. 이러한 렌더링을 하는 방식이 SSR과 CSR이 있는데, 이 두 가지 렌더링 방법에 대한 차이를 이해해보려고 합니다. 2. SSR(Server Side Rendering) https://narup.tistory.com/235 [Next.js] SSG, SSR 개념 정리 1. 개요 전 글에서는 Hydrate에 대해서 알아봤는데, 이번에는 SSG(Server-Side-Generation, Static-Site-Generation)와 SSR(Sever-Side-Rendering)에 대해 알아보려고 합니다. React: CSR(Client-Si..

[React] 콜백에서의 useState, useEffect 사용 이슈

1. 개요 위 아래로 스크롤 할 때, 섹션별로 스크롤이 이동하는 기능을 구현하는 과정에서 scroll event를 사용하게 되었는데, 이때 event가 발생할 때 콜백으로 scroll section index 값을 변경하려고 했습니다. 이때, 스크롤 인덱스가 무조건 변경되는 것이 아니라, 인덱스가 특정 범위를 넘지 않도록 필터링을 하는 조건을 추가하였는데요. useEffect의 dependency로 등록한 scrollIndex의 console은 잘 찍히는 반면, 필터링하는 부분에서의 scrollIndex 값은 1로 고정이 되어 있었습니다. 사용된 코드 const outerDivRef = useRef(); const windowSize = useRef(getWindowDimensions()); const ..

[React] Redux Toolkit 에서의 비동기 처리(createAsyncThunk, extraReducers)

1. 개요 앞서서 Redux Toolkit의 상태관리를 위한 기본적인 사용법에서 알아보았는데요, createSlice()를 통해 Slice라는 것을 생성하며, 여기에 초기 default 값과 dispatch를 통해 호출할 reducer 함수를 지정했었습니다. 프로그램 개발을 하다보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다. 하지만 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에,..

[React] Redux Toolkit 사용법

1. 개요 React에서 상태관리 툴로 Redux를 사용하는데, Redux를 사용하기가 상당히 까다롭고 진입장벽이 높습니다. 액션 함수, 액션 생성 함수, 리듀서, 스토어... 또 타입스크립트를 쓰게 되면 해당 타입을 또 일일히 지정해주어야 하고 관리할 상태값이 1개가 생길 때마다 작성하는 코드도 많아집니다. 가독성도 안좋아지고요... 이러한 문제 때문에 상태관리를 도와주는 라이브러리가 등장하게 되었는데, 사실 Redux Toolkit보다 더 직관적이고 좋은 라이브러리는 많습니다. 다만 상태관리라는 개념에 대해 정확하게 알고 사용하는 것이 좋을 것이라고 생각이 되어 Redux를 먼저 사용해보고 그 Redux를 편리하게 만든 Redux Toolkit에 알아보려고 합니다! 2. 설치 공식사이트는 아래와 같습..

[React] Redux 사용하기(2) - 카운터 구현

1. 개요 첫번째 글에서 흐름을 설명했던 카운터를 실제로 구현해보겠습니다. 코드는 아래 블로그를 참고했습니다. https://react.vlpt.us/redux/04-make-modules.html 4. 리덕스 모듈 만들기 · GitBook 4. 리덕스 모듈 만들기 이번에는, 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 react.vlpt.us 2. 코드 작성 결과물은 위와 같습니다. 인풋 값으로 숫자를 입력받아 그 값만큼 현재값에서 +하거나 -하는 카운터 기능입니다. 프로젝트 폴더 구조는 위와 같습니다. module/counter.js /* 액션 타입 만들기 */ // Ducks 패턴을 따를땐 액션의 ..