React48 [React]div 외부 클릭을 감지 Hook으로 구현 이번 포스팅에서는 Hook에서 div 외부 클릭을 감지하는 방법을 소개합니다. 이전에 컴포넌트 외부 클릭을 감지하는 방법에 대해 해당 포스팅에서 소개하였지만, 클래스 컴포넌트 위주의 설명이었고 커스텀 훅을 사용하지 않았기 때문에 이번에는 커스텀 훅 기반으로 구현합니다. 목차 드롭다운 생성 div 외부 클릭 감지 커스텀 훅으로 구현 드롭다운 생성 드롭다운에 매핑되는 객체의 배열을 작성합니다. const objList = [ { code: "", name: "", key: "key_empty" }, { code: "A", name: "A", key: "key_A" }, { code: "B", name: "B", key: "key_B" }, { code: "C", name: "C", key: "key_C" }.. React/React 문법 2021. 11. 2. [React]React에서 Sass 사용 이번 포스팅에서는 React 프로젝트에서 Sass를 사용하는 방법에 대해 설명합니다. 목차 Sass 개념 React 프로젝트에서 Sass 사용하는 방법 Sass 개념 Sass는 Syntactically Awesome Stylesheet의 약자로 아래 특징을 가지는 CSS 전처리기입니다. 중첩 규칙 변수 정의 인라인 mixins 함수 사용 간단하게 작성된 CSS는 문제가 없지만, 방대하고 복잡하게 구현된 CSS는 한눈에 이해하기 어려우며 가독성이 저하되기 때문에 유지보수가 어렵습니다. 하지만, Sass를 사용하면 복잡한 코드를 재사용 가능하고 좀 더 심플하게 작성할 수 있습니다. Sass는 전처리기이기 때문에 직접 동작시킬 수 없으며, 웹에서 실행되지 않습니다. Sass가 웹에서 동작하는 원리는 node-.. React/유용한 NPM 2021. 11. 2. [React]조건문 작성 방법 이번 포스팅에서는 JSX에서 조건문을 좀 더 깔끔하게 작성할 수 있도록 지원하는 패키지를 소개합니다. 목차 지저분한 JSX의 조건문 jsx-control-statements 사용 지저분한 JSX의 조건문 많은 개발자들은 조건문을 작성하기 위해 if~else문 또는 switch문에 익숙하며, 조건문이 시작되고 있음을 한눈에 파악할 수 있습니다. 하지만, JSX에서 조건문을 작성하기 위해 사용되는 삼항 연산자는 코드를 지저분하게 만들며 가독성이 떨어지는 단점이 존재합니다. 다음과 같이 간단한 로직이 존재합니다. if (isLoading) { // loading... } else { if (isMain) { // title, category 처리... } // main... } isLoading이 true이면.. React/유용한 NPM 2021. 11. 2. [React]TypeScript기반 Type Alias vs interface 이번 포스팅에서는 TypeScript 기반의 React 애플리케이션을 개발할 때, Type을 정의하는 방법을 설명합니다. JavaScript는 다른 프로그래밍 언어와는 다르게 변수 또는 객체를 생성할 때, 타입을 정의하지 않습니다. var arr = {}; // 타입 변환 전 console.log(typeof arr); // object arr = 5; // 객체를 number타입으로 변환 // 타입 변환 후 console.log(typeof arr); // number var, let, const 키워드를 사용하여 변수 또는 객체를 생성하므로 타입 변환이 자유롭다는 장점이 있지만, 다음과 같은 단점도 존재합니다. [JavaScript의 단점] - 타입을 유추하기 어렵습니다. - 애플리케이션이 동작할 때.. React/React 문법 2021. 10. 22. [React]props.children에 props 전달 이번 포스팅에서는 props.children에 데이터를 전달하는 방법을 소개합니다. React에서 props는 읽기 전용이므로 수정이 불가능하며, 마찬가지로 props.children도 수정할 수 없습니다. 만약, props.children을 수정하고 싶다면, Reac.cloneElement 함수를 사용하여 자식 컴포넌트를 복제 후 수정하거나 React.Children.toArray 또는 React.Children.map 함수를 사용하여 새로운 배열을 생성 후 수정할 수 있습니다. 그럼 하나씩 살펴보도록 하겠습니다. 목차 React 엘리먼트를 복제하는 React.cloneElement 함수 props.children복제 props.children 조작 React 엘리먼트를 복제하는 React.clone.. React/React 문법 2021. 10. 20. [React]children 함수(map, forEach, toArray, count, only) React에서 props.children을 다양하게 조작할 수 있는 함수들을 소개합니다. 목차 props.children을 순회하는 map, forEach 함수 개수와 관련 있는 count, only 함수 배열을 반환하는 toArray 함수 props.children을 순회하는 map, forEach 함수 React.Children.map은 자바스크립트 Array.prototype.map과 유사하지만, 동일하지는 않습니다. React.Children.map은 React에서 props.children을 다루기 위한 독자적인 API이며, React.Children.forEach 또한 마찬가지입니다. React.Children.map은 각 자식을 순회하여 함수를 호출하며, 함수가 반환하는 값들을 배열로 생성합.. React/React 문법 2021. 10. 19. [React]setState Callback 함수 사용 이번 포스팅에서는 React에서 setState의 Callback 함수를 사용하는 경우를 소개합니다. 목차 setState의 Callback 함수를 사용하는 경우 Class 컴포넌트의 setState Callback Function 컴포넌트의 setState Callback setState의 Callback 함수를 사용하는 경우 react에서 setState의 Callback 함수를 사용하는 경우는 state를 변경 후 변경된 state를 사용하는 경우입니다. 우선, Callback 함수를 사용하지 않은 경우 어떠한 문제가 발생하는지 알아봅시다. 다음은 [* 2] 버튼을 클릭하면 this.state.num의 값을 2배로 변경 후 콘솔에 this.state.num의 값을 출력하는 함수입니다. twiceBu.. React/React 문법 2021. 10. 18. [React]함수형 컴포넌트에 props 전달 이번 포스팅에서는 React에서 함수형 컴포넌트에 props를 전달하는 방법과 props의 개념에 대해 소개합니다. 목차 props 개념 부모 컴포넌트가 자식 컴포넌트에 props 전달 자식 컴포넌트가 부모 컴포넌트에 props 전달 정리 props 개념 React에서 애플리케이션을 설계할 때 컴포넌트 간 데이터의 흐름을 구조하는 것이 중요합니다. 여기서 말하는 컴포넌트 간 데이터의 흐름은 한 컴포넌트에서 다른 컴포넌트로 데이터 전달(props의 전달)을 의미합니다. props의 전달은 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 것이며, 자식 컴포넌트는 한 개가 될 수 있고 두 개 이상이 될 수 있습니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 과정을 React와 프로그래밍 개념을 .. React/React 문법 2021. 10. 15. [React]props.children 사용 이번 포스팅에서 컴포넌트 간 합성(Composition)과 props.children을 소개합니다. 목차 합성(Composition)과 props.children props.children 필요성 props.children 메서드 자식과 자손 합성(Composition)과 props.children children이란? 공식 문서에는 props.children에 대해 아래와 같이 설명하고 있습니다. 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. 저는 공식 문서에서 설명하고 있는 내용이 이해가 되지 않아서 props.children을 다음과 같이 해석하고 .. React/React 문법 2021. 10. 6. [React]Hook에서 prevState 구현 이번 포스팅에서는 React Hook에서 prevState를 구현하는 방법을 설명합니다. 미리 말씀드리자면, React Hook에서는 클래스 컴포넌트처럼 생명주기 메서드에서 prevState를 사용할 수 없습니다. React Hook에서 사용 가능한 useEffect를 활용한다면, 이전 state 값과 현재 state 값을 비교할 필요가 없기 때문입니다. 그럼에도 불구하고 이전 state 값과 현재 state 값을 비교해야 한다면, 커스텀 훅과 useRef를 활용하여 prevState처럼 사용할 수 있습니다. 목차 React 클래스 컴포넌트에서 prevState React Hook에서 componentDidMount 커스텀 훅과 useRef를 활용하여 prevState처럼 사용 React 클래스 컴포넌트.. React/React 문법 2021. 10. 5. [React]클래스 컴포넌트 생명주기 Hook으로 변경 이번 포스팅에서는 React에서 클래스 컴포넌트의 생명주기(LifeCycle)를 React Hook으로 변경하는 방법을 설명합니다. 목차 React 생명 주기 React Hook에서 componentDidMount React Hook에서 componentDidUpdate React Hook에서 componentWillUnmount 예제 코드 React 생명 주기 기본적인 React 생명 주기는 [마운팅(Mountin) → 업데이트(Update) → 마운트 해제(Unmounting)] 과정을 거치며, 클래스 컴포넌트에서는 각 과정을 담당하는 생명주기 메서드가 있습니다. componentDidMount 컴포넌트가 마운트 된 후 호출됩니다. 브라우저에서 한 번만 실행됩니다. axios, fetch 등을 사용하.. React/React 문법 2021. 9. 29. [React]import, export 사용 방법 React에서 애플리케이션의 크기가 커질수록 하나의 파일에서 코드를 작성하기에는 한계가 존재합니다. 이러한 문제를 해결하기 위해 자바스크립트에서는 모듈(module)이라는 기능을 지원하여 하나의 파일을 여러개의 파일로 나눌 수 있습니다. 위 사진은 App.js에서 Page와 관련된 로직을 컴포넌트로 분리하였으며, Page 폴더에서 관리하는 구조입니다. App.js가 Page 폴더 내부에 있는 파일들의 코드를 접근하는 방법은 두 가지 입니다. 방법 1. 파일경로를 직접 접근하여 import import DefaultPage from "./Page/DefaultPage"; import Page001 from "./Page/Page001"; import Page002 from "./Page/Page002"; .. React/React 문법 2021. 8. 6. 이전 1 2 3 4 다음