리액트 컴포넌트에서 다루는 데이터는 두개로 나뉩니다. 바로 props 와 state 인데요, 미리 요약하여 설명드리자면 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없습니다. 반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다. 새 컴포넌트 만들기 자, 한번 새로운 컴포넌트를 만들어봅시다. src 디렉토리에 MyName 이라는 컴포넌트를 만들어보세요. import React, { Component } from 'react'; class MyName extends Component { render() { return ( 안녕하세요! 제 이름은 {this.props..

프론트엔드 라이브러리 / 프레임워크 프론트엔드 라이브러리 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다. 대표적으로 Angular, Ember, Backbone, Vue, React 등 라이브러리 / 프레임워크의 선택 Angular UI 를 구현하게 되면서, 앵귤러만의 문법같은 것들이 다양하게 존재합니다. 특정 기능을 구현 할 때, 편리하게 대신 해주는 것들이 많습니다. 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있습니다. 앵귤러1의 경우 만들어진지 꽤 오래 됐고, 기업..

프론트엔드 라이브러리 / 프레임워크 프론트엔드 라이브러리 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다. 대표적으로 Angular, Ember, Backbone, Vue, React 등 라이브러리 / 프레임워크의 선택 Angular UI 를 구현하게 되면서, 앵귤러만의 문법같은 것들이 다양하게 존재합니다. 특정 기능을 구현 할 때, 편리하게 대신 해주는 것들이 많습니다. 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있습니다. 앵귤러1의 경우 만들어진지 꽤 오래 됐고, 기업..

React-query 란 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 편리하게 제공해주는 라이브러리로 알려진 react-query에 관해 간단하게 공부해보았습니다. 기존 상태 관리 라이브러리 redux 및 RTK를 사용해오면서 비동기 로직을 처리 부분에서 클라이언트 데이터와 서버 데이터가 뒤섞이고 어느 순간 방대한 로직이 되어버려 로직 파악이 힘들어지고 state 관리가 힘들어지는 상황을 몇 번 직면하였습니다. 이에 대한 해결 방안으로 react-query가 사용된다고 하네요. react-query의 최대 강점이 서버, 클라이언트 데이터를 분리해주는 것으로 이해했습니다. 이외에도 react-qeury의 장점으로는 아래와 같이 있습니다. 캐싱 자동 refreshing get을 한 데이터에 대해 up..

💻 redux-saga를 이용한 비동기 액션처리 비동기 액션을 처리하는 라이브러리 리덕스에서 액션 처리후, 비동기 처리를 통해 상태값을 변경시키고 싶을 경우 사용 redux-thunk redux-observable (RxJS 패키지 기반) redux-saga : 제너레이터 기반, 활용도가 높고/ 테스트 코드 작성에 쉬움. 💡 제너레이터 제너레이터는 function*와 같이 작성. function* f1() { console.log('f1-1'); yield 10; console.log('f1-2'); yield 20; console.log('f1-3'); return 'finished'; } const gen = f1(); console.log(gen.next()); /* 실행구간 console.log(..

💻 react-redux 기존에 리액트에서 리덕스 사용 👉 useEffect 훅 & useReducer 훅을 사용하여 상태값을 업데이트 react-redux 👉 useSelector 훅으로 상태값 업데이트 , 자동으로 값 변경시에만 렌더링 가능 App 컴포넌트 Provider에 store를 넘겨 사용 : 액션 처리 시, 이벤트를 받아 하위 컴포넌트가 렌더링 되도록 import React from 'react'; import FriendMain from './friend/container/FriendMain'; import TimelineMain from './timeline/container/TimelineMain'; import { Provider } from 'react-redux'; import s..