Front-End/React + Native12 [React]useReducer와 useContext로 알아보는 전역 상태 관리 이전의 포스팅을 통해 useState와 useReducer의 차이점과 언제 useReducer를 쓰는 것이 좋은지에 대해 알아보았다. 또한, 해당 포스팅에서 useReducer는 Redux와 원리가 비슷하지만 실제로는 그 차이가 있다고 언급했다. Redux와 useReducer는 어떻게 다른지, 구현 방식에서 어떤 차이가 있는지 좀 더 자세하게 알아보자. Redux와 useReducer의 차이점 React의 useReducer와 Redux는 모두 리듀서 패턴(reducer pattern)을 기반으로 한 상태(state) 관리 방식을 사용한다. 리듀서 패턴이랑 상태(state)를 변경하는 로직을 하나의 함수(reducer)에서 관리하는 방식을 의미하는데, 상태를 직접 변경하지 않고 액션(action)을 통.. 2025. 2. 1. [React]useState vs. useReducer 이전의 포스팅에서는 효율적인 애플리케이션 구동과 프로젝트 관리 등의 이유로 상태관리를 "잘" 해야된다고 했었는데, 이 주제와 관련해서 리액트에서 대표적으로 사용되는 상태 관리 훅(hook) 두 가지에 대해 알아보고자 한다. 바로 useState와 useReducer이다. 보편적으로, useState는 단순한 상태 관리를 사용할 때 좋고 useReducer는 복잡한 상태 관리를 필요할 때 사용하는 것이 좋다고 알고 있다. 하지만 실무에서는 useState가 익숙하고 간단하다보니 useReducer를 제대로 사용하는 경우가 매우 드물다. useState와 useReducer 훅들은 정확히 어떤 차이가 있고, 어떤 상황에 따라 알맞는 훅을 사용하는 것이 좋을지 다시 한 번 자세하게 알아보자. useStat.. 2025. 2. 1. [React]왜 리액트는 뮤텍스 잠금(Mutex Lock)이 없을까? 최근 컴퓨터 공학 개론에 관련된 강의를 듣게 되면서 동기화(synchronization)와 교착상태(deadlock)에 대해 좀 더 깊게 알아볼 기회가 생겼다. 관련된 공부를 하면서 한 가지 의문이 들었다. 자바스크립트, 리액트에서 뮤텍스 락(Mutex Lock)이 있나? 가만히 생각해보면 답은 의외로 쉬운데, 누군가에게 이 개념에 대해 깔끔히 설명하자니 왜 이런 의문을 가지게 됐는지, 왜 정답이 다소 뻔한데도 답을 하기 어려운지 설명하기 쉽지 않았다. 이번 포스팅을 통해 뮤텍스 락과 관련된 개념들의 정의, 그리고 왜 리액트에 뮤텍스 락이 불필요한지 정리해보고자 한다. 동기화와 뮤텍스 뮤텍스를 알기 위해서는 동기화를 먼저 알아야 한다. 동기화(synchronization)란, 여러 스레드나 프로세스가 .. 2024. 12. 15. [React-Native]데이터 인코딩 기본 개념, 근데 이제 RNFS를 곁들인 최근 AI 부트캠프를 수강하고 있는데, Jupyter Notebook을 활용한 실습 중에 인코딩 문제가 발생했었다. 파이썬 코드를 기반으로 간략하게 설명하자면, 사용 중인 해당 과제에서 사용 중이던 python 3.9.0 버전 기준으로는 아래와 같은 코드를 실행할 수 없었다. with fileinput.input(glob.glob(os.path.join(path, "*.txt"))) as f: for line in f: print(line) 이유는 다운로드한 강습 자료가 CP949(한국어 중심의 인코딩 방식, utf-8 유니코드와 다르게 데이터를 표현)로 인코딩 되어 있었고, 해당 파이썬 버전과 호환되는 fileinput 내장 라이브러리에서는 encoding="utf-8" 속성을 활용할.. 2024. 11. 24. [React]React 16 버전에서의 주요 변화점과 동작 원리 프론트엔드 개발자라면 리액트는 너무나도 친숙한 기술 스택이다. 언제부터 리액트는 이렇게 인기가 많아지게 되었을까? 그리고 웹 개발자들은 왜 리액트를 선호하게 되었을까? 리액트의 중요한 분기점이 되었을 16 버전의 주요 업데이트와 동작 원리, 그리고 역사를 간단히 알아보도록 하자. Why use React? (왜 리액트를 쓰는가?) 2023년에 스택오버플로우에서 개발자들을 대상으로 진행한 설문에서 "웹 프레임워크 및 기술" 부문에서 위와 같은 결과가 집계되었다. 웹 개발, 특히 프론트엔드 분야에서는 현재 가장 많이 사용되는 기술 스택이라고 보아도 될 것이다. 하지만 의문이 든다. 왜 사람들은 리액트를 주요 기술 스택으로 채용하여 개발하게 되었을까? 그냥 너도나도 써서 리액트를 썼을리는 없는데, 무엇이 리.. 2024. 10. 13. [React-Query]리액트 쿼리 기본 문법 리액트 쿼리를 왜 써야 하는지 지난 포스팅에서 언급했으니, 이제 기본 문법들을 정리해 보자. 해당 문법들에 대한 설명은 udemy에서 내돈내산한 강의 React Query / TanStack Query: React Server State Management의 내용을 기반으로 하고 있다.QueryClientProvider리액트 쿼리를 사용하기 위한 기본 공급자(Provider) 컴포넌트이다. 비슷한 예시로 ThemeProvider, RouterProvider를 생각하면 될 것 같다. 상위 컴포넌트에서 한 번 감싸서 사용하면 되고, 보통 queryClient라고 선언하는 인스턴스를 client 속성에 할당해주어야 한다. 아래와 같은 형식으로 생성한다. import { QueryClient, QueryClie.. 2024. 6. 24. 이전 1 2 다음
