개발/프론트엔드 (JS & React) 21

[React Hooks] Custom Hook examples 커스텀 훅 예제

리액트 훅에는 useState, useEffect, useMemo 등이 있는데, 리액트에서는 이러한 기본 훅 이외에도 커스텀 훅을 만들 수 있다. 리액트 공식 문서에서는 커스텀 훅을 사용하면 컴포넌트 로직을 재사용 가능한 함수로 만들 수 있다고 소개하고 있다. 그렇다면 커스텀 훅은 언제 사용되고 어떤 예제가 있는지 알아보자. useFetch 출처 프론트엔드를 개발할 때 서버로부터 데이터를 받아와 화면에 뿌려주는 것은 누구나 해봤을 것이다. 이 때 가장 흔한 코드 패턴은 useState를 사용해 `data` state를 선언하고 useEffect를 사용해 컴포넌트가 처음 렌더링될 때 fetch를 사용해서 데이터를 받아오고 그 값을 `data` state에 업데이트하는 것이다. const App = () =..

[React Hooks] useMemo & useCallback

useMemo와 useCallback 훅에 대해 알아보자. useMemo useMemo에서 memo는 memoization(메모이제이션)을 의미하고, 메모이제이션이란 값을 캐싱하여 같은 계산을 반복하지 않아도 되게 하는 기술을 말한다. useMemo는 memoized 값을 리턴하고, 보통 비싼 연산을 계산할 때 사용된다. 컴포넌트는 렌더링시 위에서부터 아래로 코드를 실행하는데, 이런 경우 내부에 비싼 연산이 하나만 있어도 전체 성능을 저해할 수 있기 때문이다. 예를 들어 computeExpensiveValue() 라는 함수가 있을 때 const value = computeExpensiveValue() 대신 const memoizedValue = useMemo(() => computeExpensiveVal..

[React Hooks] useReducer 사용해서 Todo list 구현하기

useReducer는 state를 관리하는 또다른 훅이다. 하나의 state를 관리하는 useState와는 다르게 useReducer는 좀 더 복잡한 상태의 state를 관리할 수 있다. useReducer 사용법은 아래와 같다. const [state, dispatch] = useReducer(reducer, initialState); 공식 문서의 카운터 예시를 통해 더 자세히 알아보자. const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; case 'decrement': return {count: stat..

[React Hooks] Context API와 컴포넌트 합성(Component Composition)

Context API Context는 state나 data에 접근하고자하는 컴포넌트를 Provider로 감싸 여러 컴포넌트가 데이터에 접근할 수 있도록 해준다. 이는 일반적으로 리액트에는 발생하는 Props drilling 문제를 해결해줄 수 있다. 예를 들어 아래와 같이 App - Header - UserInfo - Greeting 처럼 중첩되어있다고 가정하자. 우리는 단지 사용자에게 Hi, {user}! 라는 메세지를 Greeting 컴포넌트에서 표시하고 싶을 뿐이다. 따라서 Header, UserInfo에서는 user state가 필요없음에도 불구하고 중간 전달자로서 children인 Greeting 컴포넌트를 위해 props를 내려줘야하는 문제가 발생한다. import { useState } fr..

[React & Storybook] 2 - 스토리 작성 방법

이전글에서 기존 리액트 프로젝트에 스토리북을 추가하는 방법을 알아보았다. [React & Storybook] 1 - 리액트에서 스토리북 사용하기 이 글에서는 스토리북과 스토리가 무엇인지 알아보고 리액트에서 스토리북(Storybook)을 시작하는 방법을 다뤄보자. 스토리북이란? 우선 스토리북은 무엇이고 왜 사용할까? 공식 문서에서 설명하 jwdevv.tistory.com 이 글에서는 스토리 작성 방법에 대해 더 자세히 알아보겠다. args 앞선 글에서 스토리는 args(argument)를 사용했을 때 Controls 패널에서 동적으로 값을 바꾸며 결과를 확인할 수 있다고 했다. 그렇다면 스토리의 args란 정확히 무엇일까? 스토리에서 args란 리액트의 props와 비슷한 의미라고 생각하면 된다. args..

[React & Storybook] 1 - 리액트에서 스토리북 사용하기

이 글에서는 스토리북과 스토리가 무엇인지 알아보고 리액트에서 스토리북(Storybook)을 시작하는 방법을 다뤄보자. 스토리북이란? 우선 스토리북은 무엇이고 왜 사용할까? 공식 문서에서 설명하는 스토리북이란 각각의 UI 컴포넌트와 페이지를 분리해서 빌드하는 프론트엔드 workshop이다. 쉽게 설명하자면 프론트엔트는 다수의 UI 컴포넌트로 구성되는데, 각각의 UI 컴포넌트를 따로 볼 수 있게 만들어서 개발 및 테스트를 더 쉽게 도와주는 것이라고 생각하면 된다. 스토리북은 React, Vue, Angular 등 UI 컴포넌트 기반의 프레임워크/라이브러리에서 사용할 수 있다. 스토리북에서 Story는 UI 컴포넌트의 렌더링된 상태를 캡쳐한다. 각 컴포넌트는 여러개의 스토리를 가질 수 있고 각 스토리는 컴포넌..

Github Action으로 CI/CD workflow 추가하기 | Azure로 리액트 앱 배포하기

GitHub Action는 레파지토리 내에서 workflow를 자동화 및 실행할 수 있도록 해주는 기능이다. 이 글에서는 그 중 Github Action을 사용해 CI/CD workflow를 추가하는 방법을 정리해보겠다. CI workflow 추가하기 예제로 리액트 앱을 사용할 것이므로 creat-react-app을 사용해서 간단한 리액트 앱을 생성하고 그 프로젝트를 Github 저장소에 push하자. 리모트 레파지토리에서 Actions를 클릭하면 저장소에 맞게 Action을 추천해준다. 이 중 Node.js를 이용해서 예제를 진행해보자. Configure를 클릭해준다. Node.js CI의 YAML 파일 예제를 확인할 수 있다. 오른쪽의 Documentation을 누르면 workflow에 대한 간단한 ..

[Refactoring JavaScript] 테스트 2 - TDD, Characterization Tests

앞선 글에서 리팩토링을 이야기할 때 테스트를 빼놓을 수 없다는 내용을 짚고 넘어갔다. [Refactoring JavaScript] 노트 1 - 리팩토링에 대해 리팩토링이라는 단어는 잘못 사용되기 쉽다. 그래서 간단하게 짚고 넘어가고자한다. 리팩토링은 interface 혹은 behavior를 유지하되 코드 구현이 달라지는 것을 의미한다. interface나 behavior이 바뀐다 jwdevv.tistory.com [Refactoring JavaScript] 테스트 코드 1 - 왜 테스트 코드를 작성해야 하나, 테스트 방법 4년차 개발자인 나의 주요 관심사는 "어떻게 더 좋은 코드를 만들 것인가"이다. 그동안 여러 책과 구글의 도움을 받아 리팩터링을 해왔지만, 복습 및 내가 뭘 모르고 있는지 배우기 위해 ..

[Refactoring JavaScript] 노트 1 - 리팩토링에 대해

리팩토링이라는 단어는 잘못 사용되기 쉽다. 그래서 간단하게 짚고 넘어가고자한다. 리팩토링은 interface 혹은 behavior를 유지하되 코드 구현이 달라지는 것을 의미한다. interface나 behavior이 바뀐다면 그건 앞으로 다룰 리팩토링이라는 뜻이 될 수 없다. 예를 들어 새로운 기능을 추가하거나 버그를 수정하거나 하는 것들 모두 리팩토링이 될 수 없다. 왜냐하면 근본적으로 behavior를 추가하거나 바꾸는 것이기 때문이다. 그럼 behavior를 바꿀 수 없는데 왜 리팩토링을 하는걸까? 리팩토링을 하는 이유는 좋은 품질의 코드(quality code)를 만들기 위해서다. quality code란 정상적으로 작동하면서도 확장하기 쉬운 코드를 의미한다. (The quality code is..

[Refactoring JavaScript] 테스트 1 - 왜 테스트 코드를 작성해야 하나, 테스트 방법

4년차 개발자인 나의 주요 관심사는 "어떻게 더 좋은 코드를 만들 것인가"이다. 그동안 여러 책과 구글의 도움을 받아 리팩터링을 해왔지만, 복습 및 내가 뭘 모르고 있는지 배우기 위해 를 읽기 시작했다. 1,2 장에서는 리팩토링에 대해 설명하고 3장에는 테스팅에 대한 내용이 나온다. 왜 테스트를 해야하는가 3장 테스팅은 왜 테스트가 필요한지 설명하는 부분부터 나오는데, 나는 모든 이유에 격하게 공감하며 읽었다. 테스트 코드를 작성하지 않는 주된 이유로 "시간이 부족해서"가 가장 많은데, 사실 테스트 코드 작성하는데 익숙해진다면 테스트 코드 작성이 오래 걸려서 시간이 부족하다는 것은 핑계일 수밖에 없다. (물론 정말로 계속 데드라인을 쳐내야 하는 상황이라면 테스트 코드 작성에 익숙하지 않은 초심자가 업무 ..