React5 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. 리액트에서 signature-pad로 서명하기, react-signature-canvas에 placeholder 넣기 회사에서 설문 제작 시 선택할 수 있는 새로운 문항 종류로 `서명 입력`을 받을 수 있는 모듈을 구현하게 됐다. 서명 입력 받는 라이브러리 중 가장 대표적으로 사용되고 있는 signature-pad를 리액트에서 좀 더 간편하게 사용할 수 있도록, React wrapper로 감싸주는 `react-signature-canvas`를 사용하기로 결정~ 해당 라이브러리를 사용하면서 고민했던 부분, 그리고 해결 방법에 대해서 글을 써보고자 한다. https://www.pocketsurvey.co.kr/survey1/ExBZRsY 여기서 완성된 기능을 사용해볼 수 있다. (포켓서베이 많이 사용해주세요😃) 오랜만에 링크 클릭해보니 서베이가 삭제된거 같다ㅠㅠ 404 뜨네ㅠㅠ react-signature-canvas를 사.. 2022. 1. 4. React 렌더링 퍼포먼스 개선 리액트 렌더링 위한 고민, useMemo, useCallback, React.memo 리액트의 컴포넌트는 state가 변경되었을 때, 그리고 props가 변경되었을 때, 부모 컴포넌트가 렌더링 될 때 렌더링된다. 예를 들어, 부모 컴포넌트의 state가 바뀌면 부모 컴포넌트, 변경된 state를 받는 자식 컴포넌트는 물론, 심지어 변경된 state를 받지 않는 자식 컴포넌트까지 모두 렌더링된다. 쓸데없는 렌더링을 줄일 수 있는 방법이 없을까? 쓸데없는 렌더링을 줄이고 성능을 최적화하기 위한 유용한 훅을 몇가지 소개하고자 한다. useMemo useMemo를 사용해 복잡한 계산식의 계산한 값을 재사용할 수 있다. useMemo는 호출 시 메모라이즈된 값을 반환한다. 복잡한 계산식을 수행해야하는 값이라면, .. 2021. 12. 29. 이전 1 다음
