즐겁게, 코드

테스팅의 중요성 지금까지 프로젝트를 혼자 진행하면서는 print 나 console.log() 등의 출력을 통해 비교적 단순한 '테스트' 를 진행할 수 있었지만, 어플리케이션의 규모가 커지고 동일한 테스트를 반복해야 하는 상황에서는 테스트 코드를 작성하는 것이 필수적입니다. 이번에는 자바스크립트의 강력한 테스팅 라이브러리 jest 와 리액트 프로젝트용 테스팅 라이브러리 react-testing-library(RTL) 을 통해 기초적인 테스트 방법에 대해 알아보겠습니다. jest 설치하기 리액트 테스팅을 경험하기 전에 일반 자바스크립트 환경에서 jest 를 알아보도록 하겠습니다. 이를 위해 npm init -y 로 프로젝트를 초기화하고, jest 와 @babel/preset-env 를 개발 의존성 파일로 설..

조건부 렌더링 뷰(Vue.js)에서는 특정 조건을 만족할 때만 컴포넌트나 블록을 렌더링하는 조건부 렌더링 을 위해 v-if 와 v-show 라는 두 종류의 지시자(directive)를 사용합니다. v-show를 사용한 블록 v-if를 사용한 블록 그런데, 왜 뷰는 동일한 역할을 수행하는 지시자를 둘이나 구현해둔 걸까요? v-if 지시자 사실 두 지시자는 엄밀히 다른 방식으로 조건부 렌더링을 구현합니다. 먼저 v-if 지시자를 볼까요? v-if를 사용한 블록 [렌더링 결과 : isVisible이 true일 때] v-if를 사용한 블록 [렌더링 결과 : isVisible이 false일 때] v-if 지시자는 조건이 참일 때는 블록을 새로 생성해 DOM 트리에 추가하고, 조건이 거짓으로 변하면 해당 블록을 D..

리액트 개발을 해보신 분들이라면 map 등을 사용해 컴포넌트를 반복적으로 생성할 때 'Warning: Each child in a list should have a unique "key" prop.' 이라는 경고를 보신 적이 있을 것입니다. 과연 key 속성이 왜 필요한 것인지 리액트의 렌더링 원리와 함께 알아보도록 하겠습니다. 요소 트리 리액트는 컴포넌트의 상태나 속성(prop)이 변할 때마다 render() 함수를 호출하는데요, render() 함수는 새로운 리액트 요소 트리를 반환하고 이를 기존의 요소 트리와 비교해 새로운 변경점에 대해서만 재렌더링을 수행합니다. 잠깐 트리를 비교하는 부분을 더 소개하자면 리액트는 O(N) (N = 노드의 개수) 의 시간 복잡도로 두 트리를 비교하기 위해 key 속..

뷰를 조금씩(정말 조금씩..) 공부하고 있는데, 의아한 점이 하나 생겼습니다. 바로 컴포넌트의 데이터를 관리하는 부분에서 name 이라는 속성을 내보내고 있는데, name 속성은 있으나 없으나 에러나 경고를 출력하지 않았기 때문입니다. 찾아본 결과, name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 합니다. 컴포넌트 구조가 재귀적일 때 : 재귀 컴포넌트에 대한 내용은 리액트에서는 들어보지 못한 개념이라 생소하지만, name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다고 합니다. Vue 개발자 도구를 사용할 때 Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 name을 기반으로 컴포넌트 트리를 보여줍니다. 따라서 컴포넌트를 재귀적으로 구성하지 않는다면 name 속성을 ..

아마 리액트에서 가장 많이 사용되는 훅을 꼽아보라 하면 useState가 주인공이 될 것 같은데요, 오늘은 useState로 상태를 변경할 때 주의할 점에 대해 다뤄보려 합니다. const [state, setState] = useState(); useState 훅은 상탯값과 상태를 변경할 수 있는 함수(※ action, setter 함수 등으로 부르는데, 여기서는 세터 함수라고 부르겠습니다.)를 제공하는데요, 세터 함수를 사용하면 원하는 값으로 상탯값을 변경할 수 있습니다. import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return ( {count} {/* 버튼을 ..

토스의 첫 개발 컨퍼런스, SLASH21이 막을 올렸습니다! 저는 이런 컨퍼런스 홍보 페이지를 보면 항상 개발자 도구에 먼저 손이 가곤 하는데, 이번에는 특이하게도 페이지가 리액트로 제작되어 있어 컴포넌트를 구경하던 중 처음 보는 forwardRef 성분에 대해 궁금증을 갖게 되었습니다. 🤔 🛠 HTML 노드를 커스텀 컴포넌트로 교체하기 import { useEffect, useRef } from "react"; import Input from "./components/Input"; function App() { const nameRef = useRef(null); const submitRef = useRef(null); useEffect(() => { alert("페이지 로딩됨"); nameRef.cu..

웹 어플리케이션 특성상 로드와 동시에 서버로부터 데이터를 불러와야 하는 경우가 자주 있습니다. 아마 대부분의 경우 useEffect 또는 useLayoutEffect 훅을 활용해 렌더링이 끝난 후 데이터를 불러올 텐데요, 한번 샘플 코드를 보겠습니다. const getGroupList = async () => { await axios .get(`${GROUP_ENDPOINT}?func=getAllGroup`) .then((res) => setGroupList(res.data)); }; useEffect(getGroupList, []); 컴포넌트 렌더링을 마친 후 useEffect 훅으로 getGroupList 함수를 호출해 그룹 리스트 상태값을 초기화해주고 있습니다. 그런데 이렇게 짜면 절대로 안됩니다!..