Hooks

훅(Hook)은 리액트의 함수 컴포넌트에서 사용되는 특별한 기능으로, 상태 관리나 생명주기 기능과 같은 리액트의 기능들을 함수 컴포넌트 내부에서 사용할 수 있다.

새로운 훅을 만들어 관련된 로직을 한 곳에 모아 관리할 수 있어 코드의 가독성이 향상되고, 로직의 재사용성이 증가하기 때문에 유지보수에 용이하다는 장점이 있다.

훅은 컴포넌트 최상위 레벨에서만 사용해야 하며, 반복문과 조건문 또는 중첩된 함수 내에서는 사용할 수 없다. 이 규칙을 통해 호출 순서가 보장되며, 리액트가 내부 상태를 올바르게 관리할 수 있다.

useState

useState는 리액트에서 상태 관리를 위해 사용되는 훅이다. 이 훅을 호출하면, 두 개의 요소를 가진 배열을 반환하는데, 배열의 첫 번째 요소는 상태의 현재 값이며, 두 번째 요소는 해당 상태를 업데이트하는 함수이다.

const [state, setState] = useState(초기);

여기서 state는 관리하고자 하는 상태의 현재 값이며, setState는 이 상태를 업데이트할 때 사용하는 함수이다. useState의 인자로 주어진 초기값은 상태의 초기값으로 설정된다.

useState를 사용할 때, 구조 분해 할당을 통해 배열의 첫 번째 요소(상태 값)와 두 번째 요소(상태를 업데이트하는 함수)에 쉽게 접근할 수 있다. 이렇게 구조 분해를 사용함으로써, 상태와 상태를 업데이트하는 로직을 명확하게 분리하고 코드의 가독성을 높일 수 있다.

Props Drilling

리액트 앱에서 상위 컴포넌트로부터 하위 컴포넌트로 데이터를 전달하는 과정이다. 이 과정에서 데이터는 중간 컴포넌트를 통해 계속 내려가게 되는데, 중간 컴포넌트들은 자신이 사용하지 않는 프로퍼티들을 단순히 하위 컴포넌트로 전달하는 역할만 하게 된다. 이는 종종 비효율적이고 코드 관리를 어렵게 만든다.

이러한 Props Drilling 문제를 해결하기 위한 방법 중 한 가지는 Context API를 사용하는 것이다.

Context API

리액트에서 데이터를 전역으로 공유하고 관리하기 위한 수단을 제공한다. 이를 통해 필요한 데이터를 깊이에 관계없이 컴포넌트에서 직접 불러와 사용할 수 잇다.

Provider : 데이터를 제공하는 컴포넌트
Consumer : Provider에서 제공하는 데이터를 사용하는 컴포넌트.
Context 객체 : Provider와 Consumer를 연결하는 매개체로, React.createContext()를 사용해 생성

Context API는 위의 세 가지 주요 구성요소로 이루어지며, 일반적인 사용 예시는 다음과 같다.

테마 데이터 (예: 다크 모드, 라이트 모드)
인증된 사용자 상태 확인 (예: 로그인 상태)
자주 업데이트할 필요가 없는 데이터 (예: 사용자 설정)

💡 단, Context API는 전역 데이터 사용을 위한 것이며, 상태 관리 자체를 목적으로 하지는 않는다. 복잡한 상태 관리를 위해서는 상태 관리 훅 또는 별도의 상태 관리 라이브러리를 함께 사용하는 것이 좋다.

useEffect

useEffect는 리액트에서 컴포넌트의 생명주기에 관한 작업을 수행할 때 사용하는 훅으로, 주요 목적은 컴포넌트의 렌더링 결과가 DOM에 반영된 후에 실행되어야 하는 부수 효과(side effects)를 관리하는 것이다.

이 훅을 통해 컴포넌트가 마운팅(mounting), 업데이트(updating), 언마운팅(unmounting)되는 시점에 특정한 동작을 실행할 수 있다.

useEffect(() => {}, [])

useEffect는 두 개의 매개변수를 받는데, 첫 번째는 컴포넌트의 렌더링 이후에 실행되는 콜백 함수이고, 두 번째는 콜백 함수의 실행시기를 결정하는 의존성 배열이다.

의존성 배열의 작동 방식은 다음과 같다.

[] (빈 배열) : 컴포넌트가 마운팅될 때와 언마운팅될 때만 콜백 함수가 실행된다. 즉, 처음 마운팅 시 한 번만 실행되고 컴포넌트가 사라질 때 한 번 더 실행된다.
[value] : 지정된 value의 값이 변경될 때마다 콜백 함수가 실행된다. 이는 해당 값에 의존하는 작업을 수행할 때 유용하다.
의존성 배열을 생략 : 콜백 함수가 컴포넌트의 모든 업데이트 후에 실행된다. 그러나 이 방식은 성능 문제를 야기할 수 있어 주의가 필요하기 때문에 거의 쓰이지 않는다.

실습 예제

SPA

SPA(Single Page Application)는 웹 애플리케이션의 한 형태로, 단 하나의 HTML 페이지로 구성되며 필요한 모든 리소스(HTML, JavaScript, CSS)를 처음에 로드한 후, 사용자와의 상호작용에 따라 필요한 데이터만 서버에서 비동기적으로 받아와 동적으로 페이지를 갱신하는 방식이다.

SPA는 전통적인 다중 페이지 애플리케이션(MPA)과 달리 페이지를 새로 로드하지 않기 때문에 페이지 전환시 발생하는 깜빡임이 없고, 사용자 경험또한 향상되는 장점이 있다.

Routing

SPA에서 중요한 개념인 Routing(라우팅)은 SPA에서 다양한 경로(URL)에 따라 다른 뷰 또는 페이지를 사용자에게 보여주는 기능으로, 리액트에서는 자체적인 라우팅 기능을 제공하지 않기 때문에, react-router와 같은 라이브러리를 사용하여 SPA의 라우팅을 구현한다.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

BrowserRouter: 웹 애플리케이션의 라우팅을 감싸는 라우터 컴포넌트
Routes: 다양한 라우트(Route)를 정의하는 컨테이너 역할
Route: 특정 경로(URL)에 렌더링할 컴포넌트를 정의
- path 속성으로 경로를 지정하고, element 속성으로 렌더링할 요소를 정의한다.
Link: 사용자가 다른 페이지로 네비게이션 할 수 있게 하는 컴포넌트
- <a>태그와 비슷하지만 페이지 전체를 새로고침하지 않고 라우팅을 처리한다.

SPA와 CSR

SPA와 CSR(Client-Side Rendering)은 밀접한 관계를 가지지만 완전히 동일한 개념은 아니다. SPA는 구조적인 접근 방식을 나타내는 반면, CSR은 페이지의 렌더링 방식을 나타낸다.

즉, SPA는 CSR 방식을 사용하여, 초기 로드 이후 사용자와의 상호작용에 따라 필요한 부분만 클라이언트 측에서 동적으로 렌더링하는 것이다.

수업 정리 및 핵심 내용

Mount와 Rendering의 차이는 무엇일까?

Mount는 컴포넌트가 최초로 DOM에 삽입되는 과정을 의미한다. 이 단계에서 컴포넌트가 처음으로 생성되고, 초기 렌더링이 일어나면서 사용자에게 보여진다.

Rendering은 컴포넌트가 업데이트되어 새로운 데이터로 화면을 다시 그려야 할 때 발생하는 과정이다. 상태 변경, 프로퍼티 갱신 등의 이유로 컴포넌트의 출력이 변경될 때마다 발생한다. 즉, 모든 업데이트에 따라 발생하며, 최초 마운트도 렌더링의 한 형태로 볼 수 있다.

Props Drilling이란 무엇이고 어떻게 해결할 수 있을까?

Props Drilling은 리액트에서 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달하는 과정을 말한다. 이 때, 중간에 위치한 컴포넌트들이 실제로 필요하지 않은 데이터를 단순히 하위 컴포넌트로 전달하는 역할을 하는데, 이는 비효율적이고 컴포넌트 간의 결합도를 높여 유지보수를 어렵게 한다.

이 문제를 해결하기 위해 Context API를 사용할 수 있다. Context API는 데이터를 전역적으로 관리하여, 필요한 컴포넌트에서만 직접 데이터에 접근할 수 있게 해주기때문에 중간 컴포넌트들이 불필요하게 데이터를 전달하는 것을 방지할 수 있다.

React Router 무엇이고, 사용하는 이유는 무엇일까?

React Router는 SPA에서 클라이언트 사이드의 라우팅을 관리하는 라이브러리이다.

SPA에서는 페이지 전환 없이 동적으로 컨텐츠가 갱신되는데, React Router를 사용하면 브라우저의 기본 동작과 일치하는 URL 기반의 네비게이션을 구현할 수 있다. 직관적인 URL을 통해 애플리케이션 내에서 자유롭게 이동할 수 있어 사용자 경험이 향상된다.

SPA란 무엇이고, CSR은 어떤 차이가 있을까?

SPA는 단일 HTML 페이지에서 필요한 모든 리소스를 초기에 로드하고, 사용자와의 상호작용에 따라 필요한 부분만 동적으로 갱신하는 애플리케이션 구조를 말한다.

CSR은 브라우저가 서버로부터 데이터를 받아 클라이언트 측에서 HTML을 동적으로 생성하는 렌더링 방식을 말한다. SPA는 일반적으로 이 CSR 방식을 채택하여, 초기 페이지 로드 후 사용자와의 상호작용에 따라 필요한 데이터만 서버로부터 비동기적으로 받아와 렌더링한다.

CSR과 SPA는 밀접하게 연관되어 있지만, 각각 애플리케이션의 구조와 렌더링 방식을 나타내는 용어라는 점에서 차이가 있다. 즉, 대부분의 SPA는 CSR 방식을 사용하지만, 모든 CSR이 SPA인 것은 아니다.

아하모먼트

프론트엔드에게 개발 실력만큼 중요한 것은?

개발 지식

베이스

취업 준비생이라면, 아래의 내용은 기본적으로 당연히 잘 알고 있어야 한다.

브라우저 동작 방식
반응형 웹
크로스 브라우징
HTML / CSS / JS

필수

프론트엔드 개발자라면, React나 Next.js와 같은 라이브러리 및 프레임워크 하나정도는 능숙하게 다룰 줄 알아야 하고, 추가적으로는 네트워크에 대한 지식이 있으면 좋다.

프레임워크 & 라이브러리 하나 정도는 능숙하게 다룰 수 있어야 한다.
네트워크 통신
HTTP
API

심화

배포
타입스크립트
모바일 앱 동작방식
SASS/SCSS

프론트엔드 개발자에게 중요한 역량

문제해결 능력, 끈질긴 성격, 창의성 등은 전반적으로 개발자에게 필요한 역량이지만, 그 중에서도 프론트엔드 개발자에게 중요한 역량은 원활한 의사소통, 협업 능력, 커뮤니케이션이 있다.

프론트엔드의 업무 범위

웹이나 어플리케이션의 디자인 구현
사용자 편의 최적화를 위한 성능 개선
서비스 기능 구현
API 통신 및 데이터 요청을 통해 로직 구현
운영체제 및 브라우저 호환성 지원 (크로스 브라우징)

이와 같이 다방면의 업무를 이해하고 있어야 하며 기획자, 디자이너, 백엔드와의 소통과 협업또한 중요한 포지션이기 때문이다.

실무 예시

기획자 : 사용자가 로그인을 실패하면 왜 안되는지 보여주고 싶어요. 에러 메세지를 아래처럼 보여주세요!

이 경우 다음과 같은 문제가 일어날 수 있다.

보안 취약점 노출 -> 부르트 포스 공격 위험

이미 가입되어 있는 아이디 입니다. (해커 : 있는 아이디라고? 비밀번호만 뚫으면 되겠네?)

개인정보 유출 -> 사용자의 개인 정보 보호에 위배

다른 서비스에 대한 보안도 취약

보통은 동일한 아이디를 여러 사이트에 사용하는 경우가 많다.

FE : "아이디 또는 비밀번호가 잘못되었습니다."와 같이 입력이 잘못된 경우만 알려주어야 합니다.

위와같이 이러한 문제들을 잘 파악하는 것 또한 프론트엔드 개발자의 역할이라고 할 수 있다.

Q&A

Q. 자기소개서 및 포트폴리오에서 강조하면 좋은 점
A. 자기소개서와 포트폴리오는 결이 다르다고 생각한다. 자기소개서는 시각화 하기 어렵고 설명해야 하는 에피소드 등을 다루면 좋고, 포트폴리오에는 객관적인 지표로 나타낼 수 있는 부분들을 명시적으로 강조하는 것이 좋다.

[4월] Hooks과 SPA

리액트에서 필수적으로 사용하는 Hooks과 SPA

Table of contents