INTHEJ BLOG

😎 서론

안녕하세요! 오늘은 React Hook Form 과 useRef 의 조합을 통해 특정 input 요소에 직접 전근하는 방법에 대해 공유하고자 합니다.
최근 게시판 프로젝트에서 게시글을 열 때 댓글 작성자 필드에 자동으로 포커스를 주고 싶었는데 React Hook Form 도입 시에 이를 구현하는데 어려움을 겪었습니다. 이에 대한 내용과 해결방법을 공유합니다.

🤔 문제상황 왜 ref={commentAuthorInputRef} 로는 동작하지 않을까?

React Hook Form 을 사용할 때, 주요 기능 중 하나는 register 함수입니다. 이 함수는 input 필드를 관리하고, 유효성 검사나 폼 제출 등의 다양한 기능을 제공합니다. 제가 처음에 사용한 방식은 아래와 같았습니다.

const commentAuthorInputRef = useRef(null)

...

useEffect(() => {
    commentAuthorInputRef.current.focus();
}, []);

...

<input ref={commentAuthorInputRef} ... />

그런데, 위와 같은 방식으로 구현하면 React Hook Form 의 register 와 ref 와 동시에 연결되지 않아, 입력 값이 undefined 로 반환되는 문제가 발생했습니다.
 
register 함수는 input 필드를 등록하면서 해당  필드의 참조 ref 를 내부적으로 관리합니다. 그렇기 때문에, 외부에서 별도의 ref 를 연결할 때는  register 와의 연동이 중첩될 수 있습니다. 이 때문에, 내부적으로 폼 값의 상태 관리나 유효성 검사와 같은 기능들이 제대로 동작하지 않게 됩니다.

🌟 해경 방법: ref 를 함수로 정의하기

React Hook Form 의 register 함수는 ref 와 함께 객체를 반환합니다. 이를 입력 요소에 연결하면서 동시에 외부 ref 에도 연결해야 했기 때문에, 함수를 사용하여 이를 해결해야 합니다.

 <input
  {...commentRegister('author', { 
  	required: '댓글 작성자는 필수 입력입니다.' 
  })}
  ref={(e) => {
    commentRegister('author').ref(e); // react-hook-form 을 위한 ref
    commentAuthorInputRef.current = e; // 외부 ref
  }}
  ...
/>

위 코드에서 중요한 점은 ref 함수가 두 가지 연결 작업을 동시에 수행한다는 것입니다.
1. React Hook Form 의 ref 에 요소(HTMLInputElement)를 연결
2. 외부 ref에도 동일한 요소(HTMLInputElement)를 연결
 
이를 통해 React Hook Form 의 기능을 그대로 활용하면서도, 외부에서도 input 요소에 접근할 수 있게되었습니다.🤭

🎬  결론

React Hook Form 은 매우 편리한 도구이지만, 때때로 다른 React 기능과의 조합이 필요할 때가 있습니다. 오늘 소개한 방식은 그러한 경우에도 도움이 될 것입니다. 특히, 외부 ref와 함께 React Hook Form 을 사용하고자 할 때 이 방식이 큰 도움이 될 것입니다. 
 
그럼 오늘도 즐겁게 코딩하세요! 😁
 

😎 서론

오늘은 리액트에서 동적 라우팅을 사용하여 페이지 모드를 어떻게 활용하는지 작성합니다. 게시판 화면을 만들어 보면서 등록, 수정, 상세의 화면을 단 하나의 페이지에서 관리하는 것이 목표였습니다. 이를 리액트로 개발하면서 페이지 간의 이동 및 데이터의 활용을 어떻게 해야 효과적으로 구현할 수 있을까? 고민하다가 동적 라우팅 활용을 알게 되었습니다.

😃 페이지 모드의 정의

먼저, AppTypes 파일에서 페이지의 모드를 관리합니다.

const AppTypes = {
  PageMode: {
    view: 'view',
    add: 'add',
    edit: 'edit',
  },
  ...
}

페이지의 모드는 view, add, edit 세 가지로 구분됩니다. 위 코드처럼 App 에서 활용된느 각 모드 타입을 별도의 파일로 분리하여 관리하면 프로젝트의 구조가 더욱 명확해지고 유지 보수가 쉬워집니다.

🌟 리액트 라우터의 활용

리액트에서 페이지간의 이동을 관리하는 가장 효과적인 방법 중 하나는 리액트 라우터를 활용하는 것입니다. 특히 동적 라우팅은 동일한 UI 구조를 가지면서 다양한 데이터를 보여주는 페이지를 구현할 때 매우 유용합니다. 페이지 모드를 활용해 라우터에서는 다음과 같이 경로와 컴포넌트를 연결해 주었는데요..

import { Navigate, Route, Routes } from 'react-router-dom'

const App = () => {
  return (
    <Routes>
      <Route path="/board/list" element={<LayoutWithComponent layout={EmptyLayout} component={Board} />} />
      <Route path="/board/view/:id" element={<LayoutWithComponent layout={EmptyLayout} component={BoardView} />} />
      <Route path="/board/:mode" element={<LayoutWithComponent layout={EmptyLayout} component={BoardView} />} />
      ...
    </Routes>
  )
}

/board/:mode 경로와 같이 동적 라우트 방식으로 게시판의 다양한 모드를 효율적으로 사용하고 있습니다.

이렇게 재사용성을 높이면 개발 과정에서의 복잡도를 줄일수 있습니다.

동적 라우팅으로 페이지를 넘기는 이벤트 핸들러 코드 예시입니다.

const handleAddClick = useCallback(() => {
  navigateTo(`/board/${AppTypes.PageMode.add}`)
}, [navigateTo])

const handleRowClick = useCallback((id) => {
  navigateTo(`/board/view/${id}`)
}, [navigateTo])

다양한 상황에 따라 유연하게 URL을 구성하여 해당 URL 에 맞는 페이지로 라우팅 할 수 있습니다.

📑 페이지 모드 관리

View 에서는 게시글의 상세 내용을 보여주며, 각각의 모드에 따라 적절한 액션 버튼들을 제공합니다. useParams를 사용하여 라우트에서 필요한 매개변수를 가져와 상태를 지정하였습니다.

const BorderView = () => {
  const { mode, id } = useParams() // mode: AppTypes.PageMode
  const [currentMode, setCurrentMode] = useState(mode || AppTypes.PageMode.view)
...
}

이렇게 할 경우 조건부 렌더링을 활용하여 현재 모드에 따라 다른 UI 요소를 보여줄 수 있습니다.

{currentMode === AppTypes.PageMode.view && (
  <>
    <button type="button" className="list-btn" onClick={handleListClick}>목록으로</button>
    <button type="button" className="edit-btn" onClick={handleEditClick}>편집</button>
  </>
)}

{currentMode !== AppTypes.PageMode.view && (
  ...
)}

이 외에도 각 모드에 따라 다른 이벤트 핸들러를 설정하거나 데이터를 요청하는 등의 동작을 분기처리할 수 있습니다.

const onSubmit = useCallback(async (data) => {
  const payload = {
    ...data
  }
  
  try {
    if (currentMode === AppTypes.PageMode.add) {
      await BoardService.create(payload)
      navigateTo('/board')
    }
  
    if (currentMode === AppTypes.PageMode.edit) {
      await BoardService.update(id, payload)
      navigateBack()
    }
  } catch (err) {
    handleError(err.response)
  }
}, [currentMode, id, navigateTo, navigateBack, handleError])

🔄 페이지 모드 변경하기

useState 에 선언한 setCurrentMode 함수를 통해 페이지의 동작 모드를 변경하여 이를 통해 사용자의 액션(예: 편집 버튼 클릭)에 따라 동작 모드를 변경하고, 그에 따른 UI를 갱신할 수 있습니다.

const handleEditClick = useCallback((e) => {
  e.preventDefault()
  setCurrentMode(AppTypes.PageMode.edit)
}, [])

🎬 결론

리엑트 라우터의 동적 라우팅을 활용하면, 사용자의 요청에 따라 페이지의 내용과 상태를 유연하게 변경할 수 있습니다. 페이지 모드의 관리와 라우팅을 최적화하는 방법을 살펴봤는데, 리엑트 프로젝트에서 이 기법을 적용하면 사용자 경험은 물론, 개발자의 작업 효율도 상당히 증진될 것이라 생각합니다. 🙂

😎 서론

프로젝트를 진행하다보면 여러 곳에서 반복적으로 라우팅 관련 기능을 구현하게 되는 경우가 많습니다. 이를 해결하기 위해 React Router 의 useNavigate 를 활용하여 보다 편리하게 사용할 수 있는 custom hook 을 만들어 보았습니다.

import { useNavigate } from 'react-router-dom'

const useAppNavigate = () => {
  const navigate = useNavigate()

  const navigateBack = () => {
    navigate(-1)
  }

  const navigateTo = (path) => {
    navigate(path)
  }

  return { navigateBack, navigateTo }
}

export default useAppNavigate

여기서 useAppNavigate 라는 custom hook 은 두가지 기능을 제공합니다.

1. navigateBack: 현재 페이지에서 이전 페이지로 돌아가는 기능

2. navigateTo: 원하는 경로로 이동하는 기능

이제 이 custom hook을 어떻게 사용하는지 간략하게 살펴보겠습니다.

🤠 navigateBack 활용

때론 사용자에게 '뒤로가기' 기능을 제공하고 싶을 때가 있습니다. 이때 navigateBack 함수를 사용하면 간단하게 구현할 수 있습니다.

const { navigateBack } = useAppNavigate();

// '뒤로가기' 버튼이 클릭되었을 때 실행
<button onClick={navigateBack}>뒤로 가기</button>

🥸 navigateTo 활용

특정 경로로 이동하고자 할 때 navigateTo 함수를 사용합니다.

const { navigateTo } = useAppNavigate();

// '/profile' 경로로 이동하고자 할 때
<button onClick={() => navigateTo('/profile')}>프로필 보기</button>

요약하면 React Router 의 useNavigate 는 굉장히 유용한 기능을 제공하지만, 특정한 사용 상황에 따라 조금 더 확장된 기능이 필요할 때가 있습니다. 이럴 때 위와 같은 custom hook 을 활용하면 보다 편리하게 라우팅 관리를 할 수 있습니다.

🤔 왜 Custom Hooks 을 만들었는가?

useNavigate 와 같은 기본 Hooks 가 있다면, 왜 추가적으로 custom Hooks 를 만들었는지 궁금할지도 모릅니다. 이에 대해서 간단하게 설명드리겠습니다.

1. 코드 간결화: 반복되는 라우팅 코드를 간단하게 만들 수 있습니다.

2. 명확성: 함수의 이름을 통해 용도를 바로 알 수 있게 됩니다. 예를 들면, navigateBack 은 바로 뒤로 가는 기능임을 알 수 있습니다.

3. 유연성: 나중에 라우팅 관련 로직을 변경할 때, 한 곳에서만 수정하면 되므로 관리가 쉽습니다.

4. 재사용: 여러 컴포넌트에서 같은 로직을 쉽게 재사용할 수 있습니다.

🤭 결론

Custom Hooks 는 프로젝트의 효율성과 가독성을 높이는 핵심 도구입니다. 이를 통해 반복되는 코드를 줄이며, 라우팅과 같은 기능을 더 명확하고 직관적으로 표현할 수 있게 되었습니다. 이는 코드의 관리와 수정을 쉽게 하며, 다른 개발자들이 코드를 이해하고 활용하는 데에도 큰 도움을 줍니다.

이번 포스팅은 "리액트를 다루는 기술" 서적을 학습하며 내용을 정리하였습니다.

왜 리액트인가?

최근 몇 년간 전 세계 개발자는 자바스크립트에 뜨럽게 열광하고 있습니다. 자바스크립트는 현재 웹 애플리케이션에서 가장 핵심적인 역할을 하고 있습니다. 자바스크립트 언어만으로 데스크톱 애플리케이션, 모바일 애플리케이션 등 규모가 큰 애플리케이션을 만들 수 있는 시대입니다. 대규모 애플리케이션 중 프런트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면.. 어떻게 해야 할까요?

이에 페이스북 개발팀은 아이디어를 고안해 냈습니다.

어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 한다.

이렇게 하게되면 애플리케이션 구조가 매우 간단해지고, 작성해야 할 코드양이 많이 줄어 들며, 더 이상 어떻게 변화를 줄지 신경 쓸 필요가 없고, 그저 뷰가 어떻게 생길지 선언만 하면 되며, 데이터 변화가 있으면 기존에 있던 것을 버리고 새로 렌더링 되게 됩니다.

페이스북 개발 팀은 이런 방식을 채택하여 최대한 성능을 아끼고 편안한 사용자 경험(user experience)을 제공하면서 구현하고자 개발한 것이 리액트(React) 입니다.

리액트의 이해

리액트는 자바스크립트 라이브러리로서 사용자 인터페이스를 만드는 데 사용합니다. 관리 구조가 MVC, MVW 등인 프레임워크와 달리 오직 V(View)만 신경 쓰는 라이브러리 입니다.

리액트에서는 특정 부분이 어떻게 생길지 정하는 선언체가 있는데 이를 컴포넌트(component) 라고 합니다. 컴포넌트는 재사용이 가능한 API 로 수많은 기능들을 내장하고 있으며 컴포넌트 하나에서 컴포넌트의 생김새와 작동 방식을 정의하여 사용하게 됩니다.

또한 사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 합니다.

리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공 할 수 있을까요? 이를 이해하려면 '초기렌더링'과 '리렌더링' 개념을 이해해야 합니다.

1) 초기 렌더링

컴포넌트의 render 함수를 통하여 렌더링이 이루어지게 됩니다. 렌더함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다. render 함수가 실행하면 렌더링이 이루어지고 HTML 마크업(markup) 을 만들고 이를 DOM 요소 안에 주입하는 작업이 이루어 지게 됩니다.

2) 리렌더링(조화 과정)

뷰를 업데이트 할적에 "업데이트 과정을 거친다" 라고 하기보다 "조화 과정을 거친다" 라고 하는 것이 더 정확한 표현입니다. 이유는 새로운 DOM 요소로 갈아 끼우기 때문입니다.

리액트는 데이터가 변경되면 render 함수가 반환하는 결과를 곧바로 DOM 에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한후 DOM 트리를 업데이트 하게 됩니다.

리액트의 특징

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것

우선 DOM 이 무엇인지 부터 알아보면.. DOM 이란 문서객체 모델(Document Object Model)의 약어입니다. 웹 브라우저는 DOM 을 활용하여 객체에 자바스크립트와 CSS 를 적용할 수 있습니다. DOM 은 트리형태로 구성되어 있는데 DOM 을 통해서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

DOM 은 과연 느릴까?

DOM 에는 치명적인 한 가지 문제점이 있습니다. 바로 동적 UI에 최적화되어 있지 않다는 것입니다.

"요즈음 자바스크립트 엔진은 매우 빠른 반면, DOM 은 느리다?" 라고 하는데 이는 정확한 말이 아닙니다.

DOM 자체는 빠릅니다. 단 웹 브라우저 단에서 DOM 에 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하게되는데 이 과정에서 시간이 허비되는 것입니다. 이에 대한 해결법으로 DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선할 수 있습니다.

Virtual DOM

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 업데이트를 진행할 수 있습니다. Virtual DOM 을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용하게 됩니다. 이는 마치 실제 DOM의 가벼운 사본과 비슷합니다..

리액트에서 실제 DOM을 업데이트 할 때 세가지 절차를 밟게 되는데 살펴보면..

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 한다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용한다.

이처럼  리액트는 Virtual DOM 을 통해서 동적 UI 최적화 문제를가지고 있는 DOM 업데이트 방식을 보안하기 때문에 효율적으로 작업을 진행 할 수 있습니다.

또한 일부 웹 프레임워크가 MVC, MVW 등의 구조를 지향하는 것과 달리 리애트는 오직 뷰만 담당하는 라이브러리 로서 취향대로 스택을 설정할 수 있다는 장점을 가지고 있지만 여러 라이브러리를 접해야 한다는 단점을 가지고 있기도 합니다.

발단

React 프로젝트에 사용하려고 선택한 html 템플릿에 스타일을 살펴보니 일반 css 와 sass 2가지 형태로 지원하였다.

sass로 적용하고 싶어 별도의 loader를 설치 한 이후 빌드 하니깐 컴파일 에러가 발생하였다.

(typescript 패키지 @types/node-sass 가 node-sass 패키지를 의존하여 같이 설치)

$ yarn add node-sass @types/node-sass

원인

node-sass 버전 충돌 이슈

설치된 패키지의 버전을 살펴보니 sass 는 6버전, @types sass 는 4버전이 설치되어있다.

@type node-sass 패키지가 node-sass 4.x.x, 5.x.x 버전까지만 호환되는 것으로 보인다.

stackoverflow: https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0

해결

설치된 패키지를 삭제하고 버전을 지정하여 설치

$ yarn add node-sass@4.14.0 @types/node-sass@4.11.2

리액트 라우터는 리액트의 화면 전환을 도와주는 역할을 한다. 일반적인 웹에서 a 태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router를 통해 Link 컴프넌트를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로 고침 할 필요가 없기 때문이다.

a 태그를 사용할 경우 페이지를 아예 새로 불러오게 되므로 리액트 앱이 지니고 있는 상태들도 모두 초기화되고 페이지가 새로 렌더링 된다.

리액트에서는 SPA 특징을 잘 사용하기 위해 React Router를 사용한다.

Create React App 이란?

create-react-app 은 페이스북에서 만든 react 웹 개발용 boilerplate입니다. react는 es6 버전의 javascript로 작성하는 것이 일반화되어있기 때문에 webpack이라는 모듈 번들러로 컴파일 및 빌드 하는 것이 필수라 이 환경을 세팅해 줘야 합니다. 직접 모든 개발 환경을 설정하지 않아도 페이스북이라는 거대한 기업에서 지속적으로 업데이트를 해주고 있고 쉽게 프로젝트 기본 환경을 구축할 수 있어서 많은 사람들이 사용하고 있습니다. 

설치

- js

yarn create react-app my-app

- typescript

yarn create react-app my-app --template typescript

Webpack 이란?

웹팩(webpack) 은 웹에서 사용되는 모든 자원(assets) 을 번들링 해주는 도구입니다. 번들링의 개념은 여러개 의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미합니다. 웹팩을 사용하면 자바스크립트 간의 종속성 뿐만 아니라 자바스크립트 내에서 필요한 css나 img와 같은 파일(.css, .jpg)도 번들링 해서 하나의 파일로 합쳐줘서 네트워크 요청을 최소화시킬 수 있습니다.

웹팩은 노드 모듈 중에 하나입니다. 웹팩을 사용하려면 Node.js 가 설치되어 있어야 합니다.

설치

yarn add webpack

NPM 이란?

NPM 은 Node Packaged Manager의 약자입니다. 자바스크립트 패키지 매니저이고 Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공합니다.

Yarn 이란?

Yarn 도 역시 프로젝트 관리자 역할을 하는 패키지 관리자입니다. 페이스북에서 만든 것으로 npm 서버에 비해 속도가 빠르고 npm 과 사용법이 비슷합니다. 

Reference: https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f

npm vs Yarn 명령어

package manager (package-lock.json, yarn.lock)

리액트로 프로젝트를 개발하며 자주 볼 수 있는 npm 을 이용하면 package-lock.json, yarn 을 사용하면 yarn.lock 파일은 왜 자동으로 생성되는 걸까요?

패키지 관리를 위해 npm을 사용하든 yarn을 사용하든 해당 프로젝트의 메타 정보는 package.json 파일을 통해 관리가 됩니다. 이 package.json 파일에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있는데요.

일반적으로 쓰이는 패키지들은 dependencies 항목에 명시되고 개발할 때만 필요한 패키지들은 devDependencies 항목에 명시됩니다.

개발자가 여려 명이 있는 개발팀에서 프로젝트에 투입되는 시간이 다르다면 각각 사용하는 설치 버전이 다를 수 있습니다. 만약 이렇게 된다면 개발자 A는 제대로 작동하지만 개발자 B에게서는 작동이 안 되는 이슈가 발생될 수 있습니다. 이런 상황은 패키지 매니저에게 패키지 잠금이 지원되지 않던 시절에 매우 골칫거리였던 문제였으며 이것을 해결하기 위한 패키지 잠금이 필요한 것입니다.

package-lock.json이나 yarn.lock 과 같은 패키지 잠금 파일에는 프로젝트에 패키지에 최초로 추가될 당시에 버전이 기록됩니다. 함께 개발하는 프로젝트에서 패키지 잠금 역할은 중요합니다. 최초에 setup 하는 개발자가 git에 패키지 잠금 파일을 반드시 올려서 다른 개발자들이 패키지가 꼬이지 않도록 신경 써야 합니다.