react14 [ 리액트(React) ] Higher Order Component 사용하기 📍 Higher Order Component 사용하기 나는 고차 컴포넌트를 즐겨 사용하지 않지만, React로 작업을 하다 보면 특정 상황에서 고차 컴포넌트를 사용하면 적합한 경우가 종종 있다. (물론 고차 컴포넌트 이외에도 효율적인 접근방법이 있지만, 여기서는 고차 컴포넌트를 사용한다고 가정하자.) id, name, title가 담긴 리스트 타입의 values는 고차함수인 map method를 통해 컴포넌트()를 하나씩 렌더링하고 있는 상황이었다. 여기서 컴포넌트 내부에는 공통적으로 useState가 주입 되어야하는 상황이다. 여기서 나는 HOC를 사용하여 해결했다. 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술인데, 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 나만의 .. 2023. 4. 13. [ 리액트(React) ] && 대신 삼항연산자 사용하기 📍 && 대신 삼항연산자 사용하기 리액트로 렌더링 view를 그릴 때 종종 && 연산자를 이용해 조건부 렌더링을 할 때가 있을 것이다. 여담으로 &&연산자는 Logical AND, 단축평가(short circuit evaluation)라고 하며, 일반적으로 왼쪽에서 오른쪽으로 피연산자를 평가하여 처음 만나는 연산자가 falsy인 경우 false를 반환하고, 모든 연산자가 truthy 한 경우 마지막 연산자를 반환하는 개념이다. falsy는 Boolean context로 변경될 때 false로 평가되는 값으로 JS에서는 false, 0, -0, "", null, undefined, NaN가 있다. truthy는 falsy와 반대로 Boolean context로 변경될 때 true로 평가되는 값으로 JS에서.. 2022. 11. 7. [ 리액트(React) ] 불필요한 prop drilling 제거하기 📍 불필요한 prop drilling 제거하기 React에서 페이지 내부에 2~3개의 컴포넌트를 선언하며 데이터를 props로 전달하는 경우가 있을 것이다. 이번 글은 한 페이지 내에 컴포넌트 3개(A -> B -> C)를 선언하여 단순히 props로 전달만하는 B컴포넌트의 prop drilling을 어떻게 해결했는지 알아보자. 우선, React를 다뤄 본 개발자라면 prop drilling에 대해 한 번쯤은 들어봤을 것이다. prop drilling이란, props를 이용해 자식 컴포넌트로 데이터를 내려줄 때 모든 레벨에서 같은 데이터가 전송되는 상황을 말한다. 규모가 작을 때 prop drilling은 빠르고 쉽게 데이터를 전송할 수 있고, 구현 방법이 쉽고, props로 전달된 데이터의 상태 변경 .. 2022. 7. 27. [ 타입스크립트(TypeScript) ] Formik으로 input state 쉽게 관리하기 📍 Formik으로 input state 쉽게 관리하기 이전 글에서 2개 이상의 useState를 하나로 묶어 input을 구현했었다. 그런데, input이 필요할 때마다 useState로 생성하여 관리하고, 타입이 여러 가지일 때 매번 그에 맞는 handleChange를 구현하는것은 상당히 번거롭다고 생각했다. 다른 개발자들도 이미 같은 생각을 했는지, 관련 라이브러리가 이미 존재하고 있었다. Formik과 React Hook Form 라이브러리인데, 오늘은 Formik에 대해서 자세하게 알아보자. Formik은 React에서 Form을 구현할 때 가장 성가신 세 가지를 도와주는 라이브러리이다. 1. 양식 상태 안팎에서 값 가져오기 2. 유효성 검사 및 오류 메시지 3. 양식 제출 처리 위의 모든 경우.. 2022. 5. 27. [ 엘리스 SW 엔지니어 트랙 ] 선택강의 - React에서의 타입스크립트 📍 [선택강의] React에서의 타입 스크립트 이번 글은 필수로 들어야 하는 강의를 기록하기 위해 적는 글은 아니고 선택적으로 듣는 강의 중 React에서의 타입스크립트 강의를 기록으로 남겨 놓을까 한다. 그 이유는 이전부터 사용해왔지만 앞으로도 사용할 언어인 타입 스크립트와 프레임워크인 React기 때문이다. 그리고 지금까지 내가 작성한 코드를 어떻게 더 효율적이게 작성할 수 있을지에 대한 몇 가지의 샘플을 배울 수 있기 때문이다. 한 가지 예로 나는 이거 먹어봄? 프로젝트의 후속조치로 webpack과 babel를 직접 설정하는 간단한 예시(image-drag-and-drop)를 만들었으나, babel을 설정하기 위해 생각보다 많은 플러그인(npm i -D @babel/core @babel/preset.. 2022. 1. 24. 이전 1 2 3 다음
