Ch.Covelope

React(리액트) 데이터 흐름: Props 드릴링부터  상태 관리 까지3년전 작성했던 : 부모 -> 자식에게 함수 전달(props 전달) -> 자식 -> 부모에게 상태 전달 (state lifting) 에 관한 글에 대한 좀더 추가된 내용으로 작성한 글 입니다.📚 목차소개: 리액트의 데이터 흐름Props 드릴링: 이해와 활용State Lifting: 상태 끌어올리기Props 드릴링과 State Lifting의 한계상태 관리 기법핵심정리소개: 리액트의 데이터 흐름리액트는 단방향 데이터 흐름(Unidirectional Data Flow)을 따릅니다. 이 개념은 리액트를 처음 접하는 많은 개발자에게 생소하면서도 핵심적인 부분입니다. 그렇다면 이 데이터 흐름이 실제로 어떻게 작동하는지 살펴보겠습니다.리액트의..

목차소개실행 순서와 타이밍useEffect 심층 이해useLayoutEffect 심층 이해실제 사용 사례성능 고려사항트러블슈팅요약 및 결론소개리액트를 사용하면서 사이드 이펙트를 처리하는 방법으로 가장 먼저 접하게 되는 훅은 useEffect입니다. 그런데 useLayoutEffect라는 비슷해 보이는 훅도 존재합니다. 이름만 봐도 둘은 분명 유사한 목적을 가지고 있지만, 실제로는 중요한 차이가 있습니다.오늘은 이 두 훅의 차이점을 정확히 이해하고, 각각 언제 사용해야 하는지를 명확하게 알아보겠습니다. 프론트엔드 개발자로서 이 차이를 제대로 이해하면 UI 렌더링 관련 버그를 방지하고, 애플리케이션 성능을 최적화하는 데 큰 도움이 됩니다.실행 순서와 타이밍두 훅의 가장 핵심적인 차이는 실행 타이밍입니다. 리..

TypeScript로 견고한 코드 작성하기: 타입의 힘을 활용한 모던 개발 가이드1. TypeScript란 무엇인가?1.1 TypeScript의 탄생 배경과 역사JavaScript는 웹 개발의 핵심 언어로 자리잡았지만, 대규모 애플리케이션 개발에서 여러 한계점을 보였습니다. 이러한 문제들을 해결하기 위해 Microsoft의 Anders Hejlsberg(C# 설계자)가 주도하여 2012년 TypeScript를 개발했습니다.이러한 문제를 해결하기 위해 Microsoft는 2012년 TypeScript를 발표했습니다.타입 시스템의 부재JavaScript는 동적 타입 언어이기 때문에 런타임에서만 타입 오류를 발견할 수 있었습니다이는 버그 발견이 늦어지고, 코드 품질 관리가 어려워지는 원인이 되었습니다대규모 개..

JavaScript 클로저와 React Hooks의 동작 원리 이해하기프론트엔드 개발을 하다 보면 클로저(Closure)라는 개념을 자주 마주치게 됩니다. 특히 React Hooks를 사용할 때 클로저는 핵심적인 역할을 합니다. 하지만 많은 개발자들이 클로저의 개념을 어렵게 느끼고, React Hooks와의 관계를 명확히 이해하지 못하고 있습니다.이 글에서는 클로저의 기본 개념부터 시작해서, React Hooks가 어떻게 클로저를 활용하는지 상세히 알아보겠습니다.목차클로저란 무엇인가?클로저의 동작 원리클로저가 중요한 이유React에서의 클로저React Hooks와 클로저의 관계실제 사용 사례와 주의점클로저란 무엇인가?클로저는 함수가 자신이 생성될 당시의 환경을 기억하는 현상을 말합니다. 조금 더 전문적으..

리코일(Recoil) ? 리코일은 2020년 Facebook 에서 만든 React 전용 상태 관리 라이브러리 이다. 이전에는 redux, mobx 그리고 React에 context등 다양한 상태관리 툴들이 존재한다. 기존 프로젝트도 redux로 되어있었고 처음 접했을 때는 많은 양에 코드들이 이해를 하는데 어려움을 주었지만 recoil은 이전 상태관리 라이브러리들과 다르게 러닝커브가 높지 않아 편하게 접근했던 거 같다. 리코일은 리액트 문법 친화적이며 get/set 인터페이스로 사용가능한 보일러 플레이트가 없는 API를 사용한다. 미들웨어 없이 비동기 처리가 가능하다 리코일 내부적으로 캐싱을 지원하며 동일한 atom 값에 대한 메모제이션된 값을 사용하여 성능적 이점이 있다. 간단하고 직관적인 API를 사..

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다.그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다.  함수형 컴포넌트 리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다.해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다. 함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다.함수가 재호출 되었을때 이전 ..

react-query 란 React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다. 설치 및 설정 NPM $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query CDN 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다. import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const q..

※콘솔로 jsx 찍어보고 궁금증이 생겨서 정리하기 JSX 란 JSX는 별도의 언어가 아니라 개발자가 JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있도록 하는 구문 확장이다. UI 구성 요소를 설명하는 더 읽기 쉽고 표현적인 방법을 제공하므로 코드를 더 쉽게 이해하고 유지 관리할 수 있다. JSX 코드는 HTML처럼 보이지만 실제로는 Babel과 같은 도구에 의해 일반 JavaScript로 변환되는 구문이다. 결과 코드는 UI 구성 요소를 만들고 조작하는 JavaScript 함수 호출 집합이다. JSX 코드는 HTML과 유사한 태그와 JavaScript 표현식을 모두 포함할 수 있으므로 개발자가 동적 데이터를 UI 구성 요소에 쉽게 포함할 수 있다. 콘솔을 찍어보고 생긴 궁금증 배열에 J..

state. - 현재 컴포넌트에 렌더링에 영향을 미치는 객체 형태의 데이터 props. - 상위 컴포넌트에서 하위 컴포넌트로 객체 형태의 데이터를 전달 (읽기 전용) state 또는 props 업데이트 시 리렌더링된다. 리액트(react) 데이터 흐름 리액트는 기본적으로 단방향 데이터 흐름을 지닌다. 일반적으로 상위 컴포넌트에서 가진 데이터를 하위 컴포넌트로 props 객체를 통해서 전달하는데 이를 props drilling 이라고 한다. 하지만 함수를 통해서 하위 컴포넌트의 데이터를 상위 컴포넌트로 전달받아서 사용할 수도 있는데 상태 끌어올리기 state lifting 이라고 부른다. 예제 - 어떻게 전달되고 끌어 올려지는지 만 보면 된다. //App.js import NewExpense from '...

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..

리액트 훅 (React hook) 간단 정리 리액트에서는 리렌더링 되는 조건들이 있는데 1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다. 2. state (상태) 가 변경되면 리렌더링 된다. 3. props 가 변경되면 리렌더링 된다. useState useState()가 호출되면 배열을 반환한다, [상태 값, 상태를 업데이트하는 함수] 렌더링과 관련된 상태를 관리하는 훅 state 가 갱신되면 리렌더링 된다 useState의 인자로 state의 초기값을 받을 수 있다. useEffect useEffect(function, deps) 부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅 컴포넌트가 렌더링 될 때마..

Sass(SCSS) 는 CSS 전처리기 (CSS Preprocessor) 이다. ※ 웹에서는 CSS 만 작동하므로 전처리기로 작성 후 CSS로 컴파일해야 한다. 기존의 CSS에서 사용할 수 없었던 많은 기능들이 추가되어 사용에 있어 편의성과 가독성이 더 좋은 거 같다. SCSS는 CSS와 완전히 호환되도록 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 호환 전처리기이다. 라이브러리 설치 (npm global 설치) $ npm install -g node-sass (yarn 설치) yarn add node-sass 확장자는 scss이다. 중첩(Nesting) Sass(SCSS)에서는 중첩기능(Nesting)을 사용할 수 있다. 중첩을 사용하여 상위 선택자의 반복을 줄이고 가독성을 더 좋..

멋사 프론트엔드 과정을 종료하고 리액트를 따로 공부해야 될 거 같아 애플코딩님의 강의를 듣던 중 강의에서 라우터 관련해서 강의대로 했음에도 안 되는 부분들이 몇 가지 있어 찾아보던 중에 react-router 가 업데이트하면 문법이 조금 바뀐 걸 알게 되었다. 아직 리액트 자체가 입문 수준이라 몇 가지만 정리하기로 했다. Switch 로 감싸진 들중에 가장 먼저 매칭 된 하나만 보여준다. Routes 는 Switch의 대체로 나왔는데 Switch 와 다르게 가장 일치하는 항목을 기반으로 선택된다. component , render 에 화살표 함수를 사용하지 않는다. element 속성에 JSX 컴포넌트를 전달할 수 있다. Router 에 component , children 대신 element를 사용 R..

React https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org React Facebook 에서 만든 제이쿼리 와 같은 프론트엔드 라이브러리이다. (Angular, Blazor 는 프레임워크); 그래서 우리는 필요한 만큼한 가져와서 사용할 수 있다. 컴포넌트 기반으로 유지보수와 재사용에 용이 Virtual DOM 으로 수정되는 부부만 업데이트 JSX (JavaScript + HTML) 싱글 페이지 애플리케이션(SPA)을 구현하기 좋다. 사용자 경험 ↑(링크가 바뀌지 않는다.) 선언형 프로그래밍. 명령형 프로그래밍은 How (..