Development/React

고차 컴포넌트란? Higher-order Component (HOC) 즉 컴포넌트 내에서 자주 반복되는 코드를 재사용하기 위한 React 기술 const EnhancedComponent = higherOrderComponent(WrappedComponent); 기존 컴포넌트가 props를 받아 UI를 만들었다면, HOC는 컴포넌트를 다른 컴포넌트로 바꿉니다. HOC는 Redux’s connect, Realy’s createFragmentContainer에서 흔히 사용하고 있습니다. 리액트에서 컴포넌트는 코드 재사용을 위한 매우 중요한 유닛입니다. 반복되는 코드 발견하기 import React, { Component } from 'react'; import axios from 'axios'; class P..

(3) useReducer useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook 입니다. 리듀서는 현재 상태(state), 그리고 업데이트를 위해 필요한 정보를 담은 액션 값(action)을 전달받아 새로운 상태를 반환하는 함수(state)입니다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다. 기본적으로 useReducer() hook 함수는 다음과 같은 형태로 사용합니다. Redux 패턴 const [, ] = useReducer(, , ) 먼저 useReducer를 사용하여 기존의 Counter 컴포넌트를 구현해보겠습니다. import React, { useReducer } fro..

Hooks는 리액트 16.8에서 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존 함수형 컴포넌트에서 할수 없었던 다양한 작업을 할수 있게 해줍니다. (1) useState useState는 가장 기본적인 Hooks이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. // info.js import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 ..

앞서 소개한 라이프사이클 메서드를 자세히 살펴보려고 합니다. 1. render() 함수 이 메서드는 컴포넌트 모양새를 정의합니다. 그렇기 때문에 컴포넌트에서 가장 중요한 메서드라고 할수 있습니다. 라이프사이클 메서드 중 유일한 필수 메서드이기도 합니다. 2. constructor 메서드 constructor(props) { ... } 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행됩니다. 이 메서드는 초기 state를 정할 수 있습니다. 3. getDerivedStateFromProps 메서드 props로 받아 온 값을 state에 동기화시키는 용도로 사용합니다. 컴포넌트가 마운트 될때, 업데이트 될때 호출됩니다. static getDerivedStateFromProps(nextProps, ..

모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링 되기 전의 준비과정에서 시작하여 페이지에서 사라질 때 끝납니다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있습니다. 이때는 컴포넌트의 라이프사이클 메서드를 사용합니다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 함수형 컴포넌트에서는 사용할 수 없지만, 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할수 있습니다. 라이프 사이클 메서드의 종류는 총 아홉 가지 입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 ..

웹 어플리케이션을 만들때 반복되는 코드를 작성할 때가 있습니다. import React from 'react'; const ArrayText = () => { const dataArray = ['hi', 'hello', 'hello world!']; return ( {dataArray[0]} {dataArray[1]} {dataArray[2]} ); }; export default ArrayText; 위의 코드에서 ... 코드가 반복되는것을 확인할수 있습니다. 보여주어야 할 데이터가 적을경우에는 상관 없지만, 보여주어야 할 데이터가 유동적이라면 위와 같은 코드로는 관리할수 없습니다. 리액트에서는 반복되는 컴포넌트를 다루기 위해 자바스크립트 배열의 map() 함수를 사용합니다. map 함수의 파라미터는 다..

Ref 란 무엇인가요? HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법입니다. Ref는 어떤 상황에서 사용해야 되나요? "DOM을 꼭 직접적으로 건드려야 할 때" 사용합니다. 그렇기 때문에 자주 사용하는 속성은 아닙니다. 대부분 state를 통해 해결할수 있습니다. 그렇기 때문에 반드시 DOM을 꼭 사용해야 하는 상황외에는 잘 사용하지 않습니다. 반드시 사용해야 하는 상황이 어떤 상황인가요? 1. 특정 input에 포커스 주는 경우 2. 스크롤 박스를 조작하는 경우 3. Canvas 요소에 그림을 그리는 경우 위의 세가지 경우에는 직접적으로 DOM을 건드려야하기 때문에 Ref를 사용해야 합니다. Ref 사용 방법? ref를 사용하는 방법은 두가..

이벤트란? 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다. 4.1 이벤트를 사용할때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. 3. DOM 요소에만 이벤트를 설정할 수 있습니다. 4.2 예제로 이벤트 핸들링 익히기 4.2.1 컴포넌트 생성 import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 ); } } export default EventPractice; [EventPractice. js] import React..

ESLint 란? ES (ECMAScript) + Lint (에러 코드 표식) ESLint는 문법 검사 도구입니다. ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메세지를 VS Code 에디터에서 바로 확인할 수 있게 해줍니다. Prettier 코드 스타일 자동 정리 도구 입니다. Prettier 을 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론이(;) 빠진경우 추가되고 기존 사용하던 작은 따옴표는 모두 큰따옴표로 변경되있을 것입니다. Prettier의 장점은 이러한 자동정리 스타일을 쉽게 커스터마이징 할수 있다는 것입니다. 아래의 .prettierrc라는 파일에서 스타일을 설정할수 있습니다. { "singleQuote" : true, "semi" : true, "use..

JSX 란? 자바스크립트의 확장 문법 JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. JSX 코드 변환 전 function App() { return ( Hello react ); } 위와 같이 작성된 코드는 아래와 같이 변환됩니다. function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } 아래와 같은 createElement 같은 코드를 매번 작성하기 불편하기 때문에 React에서는 JSX를 사용하..

리액트에서 프로젝트 생성 방법인 Create-react-app에 대해 알아보고자 합니다. 리액트에서 Create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구입니다. 나중에 설정을 커스트마이징 해야하면 자유롭게 설정을 변경할 수도 있습니다. 프로젝트 생성하기 프로젝트는 npm / yarn 두가지로 생성할 수 있습니다. 이 도구를 사용하는 명령어는 다음과 같습니다. $ npx create-react-app # yarn 을 사용하는 경우 에는 다음과 같이 명령어를 입력합니다. $ yarn create react-app 프로젝트 생성이 완료되면 다음 명령어를 입력하여 프로젝트 디렉터리로 이동한 뒤 리액트..

개발환경 세팅을 하기 이전에 리액트 사용시 같이 사용하는 node.js / npm / yarn / git에 대해 간단하게 개념을 정리하고자 합니다. Node js란? Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다. node.js를 설치하면 node.js 패키지 매니저 도구인 npm이 설치가 됩니다. npm이란? NPM는 Node Package Manager의 약자이다. 자바스크립트 패키지 매니저이고 NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공한다. (CLI : 명령 줄 인터페이스, 터미널을 통해 사용자와 ..