Front-End32 [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-TS]상태 관리, 우리는 얼마나 잘하고 있을까? 상태 관리의 중요성상태(state)란 리액트를 사용하면서 가장 빈번하게 접하는 용어 중 하나로, 렌더링에 영향을 줄 수 있는 동적인 데이터 값을 의미한다. 상태는 리액트를 사용하는 이유라고 봐도 무방할 정도로 중요한 개념인데, 컴포넌트(Component)가 동적으로 렌더링 되는데 영향을 끼치기 때문이다. 상태는 각각의 데이터 범위와 목적에 따라 지역 상태(Local State), 전역 상태(Global State), 서버 상태(Server State)로 분류된다. 지역 상태는 컴포넌트 내부에서만 사용되는 상태로, 상태 변화가 해당 컴포넌트 또는 자식 컴포넌트에 영향을 미치는 경우들이 해당된다. 보통은 useState 훅으로 관리를 하는데 입력 필드 값, 모달 열림/닫힘 상태 등의 상황에서 사용된다. 전역.. 2025. 1. 19. [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. [TypeScript]타입스크립트 컴파일러(tsc)는 어떻게 작동하는가? (feat. AST란?) 최근 직장 동료들과 주 1회 스터디를 통해 "우아한 타입스크립트 with React" 책을 완독 했다. 이후 스터디 내용들을 복습하고 다시 정리할 기회를 가질 예정이지만, 그에 앞서 왜 타입스크립트를 사용하는지, 그리고 타입스크립트가 어떻게 작동하고 있는지에 대한 포스팅을 먼저 작성해보려고 한다. 왜 타입스크립트를 쓰게 되었는가?자바스크립트(JS)가 웹 브라우저에서 실행되는 동적 프로그래밍 언어로, HTML 및 CSS와 함께 웹 개발의 핵심 요소 중 하나인 것은 널리 알려져 있는 사실이다. 덕분에 개발자들은 웹 환경에서 문서 객체 모달(DOM, Document Object Model)을 조작하여 사용자 상호 작용을 처리하고 비동기적으로 서버와 데이터를 주고받는 등의 다양한 기능을 구현할 수 있었다. 문제.. 2024. 11. 10. 이전 1 2 3 4 ··· 6 다음
