# 처음 React 배울 때 알았으면 진짜 좋았을 것들 (삽질 경험 대방출!)
안녕하세요! 벌써 개발 경력 5년차가 된 김**입니다. 시간 진짜 빠르네요. 저는 주로 프론트엔드 개발을 하고 있고, React를 메인으로 사용하고 있어요. 처음 React를 접했을 때 진짜… 솔직히 말하면 너무 어려웠어요. 😭 지금이야 어느 정도 익숙해졌지만, 그때 삽질했던 경험들을 생각하면 아직도 이불킥각입니다. ㅋㅋㅋ 그래서 오늘은 저처럼 React 처음 시작하는 분들을 위해, 제가 직접 겪었던 삽질 경험들을 바탕으로 “이렇게 시작했으면 훨씬 좋았을 텐데!” 하는 것들을 싹 다 풀어보려고 합니다. 완벽한 정답은 아니겠지만, 제 경험이 조금이나마 도움이 되셨으면 좋겠어요!
## 1. 공식 문서, 너 진짜 어려운 존재구나? (feat. 영어 울렁증)
처음 React 공부를 시작했을 때, 당연히 공식 문서부터 찾아봤죠. 근데… 아시죠? 공식 문서 특유의 그 딱딱함… 😅 영어 울렁증까지 있는 저에게는 진짜 넘사벽이었어요.
### 1.1. 번역기의 중요성 (a.k.a 파파고 찬양)
진짜 솔직히, 처음에는 공식 문서 번역될 때까지 기다렸어요. 🤦♀️ 근데 언제 번역될지도 모르고, 번역돼도 뭔가 어색한 부분들이 있더라구요. 그래서 파파고 번역기를 적극적으로 활용하기 시작했습니다. 처음에는 한 문장씩 돌려봤는데, 나중에는 아예 페이지 전체를 번역해서 보니까 훨씬 이해가 잘 되더라구요. 지금은 어느 정도 영어가 익숙해졌지만, 아직도 모르는 부분은 파파고의 도움을 받습니다. 파파고 만세!
### 1.2. ‘튜토리얼’부터 시작하는 용기
공식 문서에 튜토리얼이 있긴 하지만, 뭔가 너무 이론적인 느낌이었어요. 그래서 ‘React 튜토리얼’이라고 검색해서 나오는 블로그나 강의들을 많이 참고했습니다. 특히 ‘틱택토’ 게임 만드는 튜토리얼은 정말 많이 따라 해봤어요. 😅 간단한 게임이지만, 컴포넌트 기반 개발 방식이나 state 관리 같은 기본적인 개념들을 익히는 데 정말 큰 도움이 됐습니다. 튜토리얼을 따라 하면서 막히는 부분은 구글링으로 해결하고, 그래도 안 되면 스택 오버플로우에 질문 올리고… 진짜 끈기 하나로 버텼던 것 같아요.
## 2. Component, 너 대체 뭐 하는 애니? (feat. 재사용성의 중요성)
처음 React를 접했을 때 가장 헷갈렸던 개념 중 하나가 바로 ‘컴포넌트’였어요. “컴포넌트가 대체 뭔데? 왜 이렇게 잘게 쪼개야 하는 거야?” 라는 생각을 진짜 많이 했습니다.
### 2.1. 무조건 작게 만들려고 했던 과거의 나
처음에는 컴포넌트를 무조건 작게 만들려고 했어요. 버튼 하나, 텍스트 필드 하나까지 전부 컴포넌트로 만들었죠. 😅 지금 생각해보면 진짜 비효율적인 짓이었는데… 당시에는 ‘컴포넌트 = 재사용성’이라는 생각에 갇혀있었던 것 같아요. 그러다 보니 코드가 너무 복잡해지고, 컴포넌트 간의 관계도 엉망진창이 되더라구요.
### 2.2. 적절한 크기의 컴포넌트, 그 오묘한 균형
깨달음을 얻은 건, 다른 개발자들의 코드를 보면서였어요. 숙련된 개발자들은 컴포넌트를 무조건 작게 쪼개는 게 아니라, 기능 단위로 묶어서 적절한 크기로 만들더라구요. 예를 들어, ‘로그인 폼’ 컴포넌트는 아이디 입력 필드, 비밀번호 입력 필드, 로그인 버튼을 묶어서 하나의 컴포넌트로 만드는 거죠. 이렇게 하니까 코드도 훨씬 깔끔해지고, 컴포넌트 재사용성도 높아졌어요. 지금은 컴포넌트를 만들 때 ‘이 컴포넌트가 어떤 기능을 담당하는가?’를 먼저 생각하고, 그 기능에 필요한 요소들을 묶어서 컴포넌트를 만들려고 노력합니다.
## 3. State, 너 때문에 밤샜다! (feat. setState의 비동기적 특성)
State 관리는 React 개발의 핵심이라고 할 수 있죠. 근데 처음에는 이 State 때문에 진짜 밤을 많이 샜어요. 특히 `setState`의 비동기적 특성을 이해하지 못해서 발생하는 버그들이 정말 많았습니다.
### 3.1. setState 직후에 state 값이 안 변하는 마법
제가 처음 겪었던 문제는 `setState`를 호출한 직후에 `state` 값을 참조했을 때, 값이 바로 변경되지 않는다는 것이었어요. 예를 들어, 다음과 같은 코드를 작성했다고 가정해봅시다.
“`javascript
this.setState({ count: this.state.count + 1 });
console.log(this.state.count); // 이전 state 값 출력
“`
저는 당연히 `count` 값이 1 증가된 값이 출력될 거라고 생각했는데, 이전 `state` 값이 출력되는 것을 보고 진짜 멘붕이 왔습니다. 이게 왜 그런지 이해하는 데 꽤 오랜 시간이 걸렸어요.
### 3.2. 콜백 함수와 함수형 업데이트의 중요성
나중에 알고 보니, `setState`는 비동기적으로 동작하기 때문에 `state` 값이 바로 변경되지 않는다는 것을 알게 됐습니다. 그래서 `setState`의 콜백 함수를 사용하거나, 함수형 업데이트를 사용해서 문제를 해결해야 한다는 것을 깨달았죠.
“`javascript
// 콜백 함수 사용
this.setState({ count: this.state.count + 1 }, () => {
console.log(this.state.count); // 변경된 state 값 출력
});
// 함수형 업데이트 사용
this.setState((prevState) => ({
count: prevState.count + 1
}));
“`
콜백 함수는 `state`가 업데이트된 후에 실행되기 때문에, 변경된 `state` 값을 안전하게 참조할 수 있습니다. 함수형 업데이트는 이전 `state` 값을 인자로 받아서 새로운 `state` 값을 계산하기 때문에, `setState`가 여러 번 호출되더라도 값이 꼬이는 것을 방지할 수 있습니다. 진짜 이 두 가지 방법을 알고 나서부터는 `state` 때문에 밤새는 일이 많이 줄었어요.
## 4. Hooks, 너 진짜 편하구나! (feat. 클래스 컴포넌트와의 작별)
React Hooks는 React 16.8 버전부터 도입된 기능인데, 처음에는 “클래스 컴포넌트도 충분히 잘 쓰고 있는데, 왜 굳이 Hooks를 써야 하는 거야?”라는 생각을 했었어요. 근데 막상 Hooks를 써보니까… 와, 진짜 신세계더라구요.
### 4.1. useState, useEffect, 너희 없이는 못 살아
`useState`는 함수 컴포넌트에서 `state`를 관리할 수 있게 해주는 Hook이고, `useEffect`는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 Hook입니다. 이 두 가지 Hook만 잘 활용해도 클래스 컴포넌트에서 작성했던 복잡한 로직들을 훨씬 간결하게 만들 수 있어요.
“`javascript
import React, { useState, useEffect } from ‘react’;
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
You clicked {count} times
);
}
“`
위 코드는 버튼을 클릭할 때마다 `count` 값이 증가하고, 문서 제목이 업데이트되는 간단한 예제입니다. `useState`를 사용해서 `count` 값을 관리하고, `useEffect`를 사용해서 문서 제목을 업데이트하는 로직을 구현했습니다. 클래스 컴포넌트였다면 `constructor`, `setState`, `componentDidMount`, `componentDidUpdate` 같은 복잡한 코드를 작성해야 했을 텐데, Hooks를 사용하니까 훨씬 간결하고 가독성이 좋죠?
### 4.2. 커스텀 Hooks, 너는 러브… ❤️
Hooks의 가장 큰 장점 중 하나는 커스텀 Hooks를 만들 수 있다는 거예요. 커스텀 Hooks를 사용하면 컴포넌트 간에 로직을 재사용하기가 훨씬 쉬워집니다. 예를 들어, API 호출 로직을 커스텀 Hook으로 만들어서 여러 컴포넌트에서 재사용할 수 있습니다.
“`javascript
import { useState, useEffect } from ‘react’;
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, [url]);
return { data, loading, error };
}
“`
위 코드는 API를 호출하고 결과를 반환하는 `useFetch`라는 커스텀 Hook입니다. 이 Hook을 사용하면 컴포넌트에서 API 호출 로직을 직접 작성하지 않아도 되고, 코드 중복을 줄일 수 있습니다. 저는 커스텀 Hooks를 사용하면서 코드 재사용성이 정말 많이 향상됐고, 개발 생산성도 높아졌습니다. 진짜 Hooks는 사랑입니다. 😍
## 결론: 꾸준함이 답이다! (그리고 삽질은 당연한 과정이다!)
돌이켜보면, React를 처음 배울 때 진짜 힘들었던 것 같아요. 모르는 것투성이고, 에러는 계속 발생하고, 답답한 마음에 코드를 던져버리고 싶었던 적도 많았습니다. 😭 하지만 포기하지 않고 꾸준히 공부하고, 삽질하면서 얻은 경험들이 지금의 저를 만들었다고 생각해요.
React는 배우기 어렵지만, 그만큼 강력하고 유용한 라이브러리입니다. 처음에는 어렵더라도 포기하지 말고 꾸준히 공부하면 분명히 좋은 개발자가 될 수 있을 거예요. 그리고 삽질은 당연한 과정이니까 너무 좌절하지 마세요! (저처럼요… 😂)
이 글이 React를 처음 시작하는 분들에게 조금이나마 도움이 되었으면 좋겠습니다. 궁금한 점이 있으면 언제든지 댓글로 질문해주세요! 다음에 또 다른 주제로 찾아뵙겠습니다. 그럼 안녕! 👋