FE/React7 controlled components vs uncontrolled components 란 controlled, uncontrolled(=제어, 비제어 컴포넌트) 그게 뭐지? 처음 들어봐~라고 할 수 있지만, 용어 상에서 오는 낯설음일 뿐이지 우리 대부분은 이미 알고 있고 사용해본 적도 있을 것이다. uncontrolled components 개발을 하면서 흔하디 흔하게 작성하는 form의 구성요소들을 생각해보자. input이나 textarea, select 같은 태그들이 떠오를 텐데, 요 dom 태그들에 ref를 주고 해당 ref의 current에 접근해서 값을 꺼내오거나/본 적이 있는가? const MyComponent = () => { const inputRef = useRef(null) return ( console.log(inputRef.current.value)}/> ) } 이런.. 2022. 11. 11. React HOC에 대해 알아보자 HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. HOC은 같은 로직을 다수의 컴포넌트에 동일 적용해야할 때 굉장히 유용하게 사용할 수 있다. 예를 들어, 우리가 프로젝트의 상태를 하나의 store에 저장해놓고 사용한다고 했을 때, 컴포넌트에서 store에 접근해 상태값을 꺼내오기 위해서는 상태값을 사용하는 컴포넌트마다 store와 연결시켜주는 코드가 필요하다. 컴포넌트 내부에 매번 작성하기보다 애초에 store와 연결되어있는 컴포넌트를 만들면 좋지 않을까? 엥? 이거 어디서 많이 보지 않았나? 하고 기시감이 든다면, 맞다. 이게 바로 대표적인 HOC, 리덕스의 connect이다. (+ 함수형 컴.. 2022. 2. 7. useSelector, useDispatch로 리덕스에 편하게 접근해보자 문제 상태 관리 라이브러리 리덕스를 사용한다면, 컴포넌트에서 리덕스에 접근하기 위해 세 단계를 거치게 된다. mapStateToProps, mapDispatchToProps를 정의한다. 정의한 상태값과 액션들을 해당 컴포넌트에 props로 내려준다. mapStateToProps, mapDispatchToProps를 컴포넌트와 connect로 연결한다. import React from 'react'; import { connect } from 'react-redux'; // 리덕스 상태를 props로 const mapStateToProps = state => ({ a: state.MyRedux.a, b: state.MyRedux.b, ... }); // 리덕스 액션을 props로 const mapD.. 2022. 1. 23. React 렌더링 퍼포먼스 개선 리액트 렌더링 위한 고민, useMemo, useCallback, React.memo 리액트의 컴포넌트는 state가 변경되었을 때, 그리고 props가 변경되었을 때, 부모 컴포넌트가 렌더링 될 때 렌더링된다. 예를 들어, 부모 컴포넌트의 state가 바뀌면 부모 컴포넌트, 변경된 state를 받는 자식 컴포넌트는 물론, 심지어 변경된 state를 받지 않는 자식 컴포넌트까지 모두 렌더링된다. 쓸데없는 렌더링을 줄일 수 있는 방법이 없을까? 쓸데없는 렌더링을 줄이고 성능을 최적화하기 위한 유용한 훅을 몇가지 소개하고자 한다. useMemo useMemo를 사용해 복잡한 계산식의 계산한 값을 재사용할 수 있다. useMemo는 호출 시 메모라이즈된 값을 반환한다. 복잡한 계산식을 수행해야하는 값이라면, .. 2021. 12. 29. Redux 불변성을 지키면서 상태 변화를 손쉽게 하는 방법, immer 불변성, 불변성! 리덕스를 사용하면서 귀에 딱지 앉게 들었을 불변성 🙉 상태는 절대 절대 직접 변경하면 안된다. 특히나 리덕스는 객체의 상태 변화를 얕은 수준에서만 인식할 수 있기 때문에 객체의 깊은 상태를 변경하면 리덕스가 상태 변화를 못 알아차릴 수도 있다. 예를 들어 아래와 같이 깊은 객체가 있다고 한다면, 우리는 이 객체를 변경하기 위해 state = { 병원: { 소아병동: { 207호: { 환자1: { 성별: 남, 퇴원예정일: 3일 후 // 이 정보를 오늘로 바꾸어 보자! }, ... }, ... } } } 아래처럼 새로운 객체를 생성하여 깊고 깊게 파고 들어가 변경을 해야한다. const { 병원 } = this.state; this.setState({ 병원: { ...병원, 소아병동: { .. 2021. 2. 15. Redux 기초 개념 요약본 / 리덕스란? MVC 패턴의 한계를 보완하기 위해 나온 Flux 패턴. 단방향 데이터 흐름을 통해서 상태 변화가 일어났을 때 손쉽게 파악할 수 있다 😎 오늘 포스팅할 Redux는 이러한 Flux 패턴을 충실히 구현해냈되 보다 간결하고 단순하게 사용이 가능하다. Redux a single centralized place to contain the global state 리덕스는 상태 관리를 위한 패턴이고 라이브러리이다. 상태는 action을 통해 업데이트되고, 리덕스를 사용함으로써 상태는 예측가능하게 관리된다. 리덕스는 애플리케이션 내에서 언제, 어디서, 왜, 어떻게 상태가 업데이트되었고 상태 변화가 일어났을 때 로직이 어떻게 동작하는지 이해하는데 도움을 준다. 🌈 리덕스 규칙 단 하나의 스토어가 존재한다. 상태는 읽기.. 2021. 2. 15. 리덕스가 등장하기 전까지 이야기, MVC 패턴의 한계와 Flux의 등장 리덕스를 공부하다보니 Flux를 공부하게 되었고, Flux를 파다보니 MVC까지 타고 내려왔당. 중간 중간 만나게 되는 아하 포인트 덕분에 공부 너무 재밌당. 재밌는 공부의 세계~ 요즘 클하로 공부 자극 뿜뿜 받는데, 너무 너무 즐겁다 😃 이로써 리덕스가 나에게 조금 더 고해상도로 다가오지 않을까 기대해본다. 그렇다면 제일 먼저 MVC 패턴부터 이야기를 해보겠다. MVC 비즈니스 처리 로직과 사용자 인터페이스 요소를 분리시켜 서로 영향없이 개발하기 수월하게 한다. 아주 널리 널리 사용되고 있는 디자인 패턴이다. Model 비즈니스 처리 로직을 담당한다. 알고리즘이나 데이터와 같은 부분들. 무엇을 할 것인지 정의한다. View 사용자 인터페이스 요소이다. 최종 사용자에게 화면에 무엇인가를 보여주기 위한 역.. 2021. 2. 15. 이전 1 다음
