💬 Q&A 모음 #02

🔗 2024년 12월 첫째 주 ( 12.02 ~ 12.08 ) - 중요 Q&A 모음

---

Q. 화살표 함수에서 중괄호를 쓰면 반드시 return 키워드를 사용해야 한다?

"화살표 함수에서 중괄호 {}를 쓰면 undefined가 반환되는 이유는 뭘까?"

📍 결론

"화살표 함수에서 {}을 사용하면 명시적으로 함수의 본문을 정의하는 것으로 간주된다. 따라서 반환값이 필요하면 return 키워드를 명시적으로 작성해야 한다. JSX 코드 작성 시, 이를 제대로 이해하지 못하면 예상치 못한 오류가 발생할 수 있다."

genres.map((g) => (
  <li key={g}>{g}</li> // 암묵적으로 JSX 반환
));
//
genres.map((g) => {
  return <li key={g}>{g}</li>; // 명시적으로 JSX 반환
});
//
genres.map((g) => {
  <li key={g}>{g}</li>; // undefined 반환
});

• 여기서 () 은 JSX 블록을 그룹화하는 역할이다. 이 안에 JSX 코드를 작성하면, 이 전체가 하나의 표현식으로 간주된다.

"그런데 useEffect 에서의 콜백 함수에서는 왜 return 을 사용하지 않았을까?"

📍 결론

"useEffect의 콜백 함수는 일반적인 값 반환을 위한 함수가 아니다. React에서 부수 효과(Side Effect)를 처리하기 위한 공간으로, 반환값이 없어도 작동한다. 특정 경우에만 정리 함수(Cleanup Function)를 반환하도록 설계되었기 때문이다."

• 반환값이 필요한 유일한 경우는 컴포넌트 언마운트 시 또는 의존성 배열이 변경될 때 호출될 정리 함수를 정의할 때 이다.

(1) 반환값이 필요하지 않은 경우

useEffect(() => {
  fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}, []);

• 이 콜백 함수는 데이터를 가져오는 부수 효과를 실행할 뿐, 반환값이 필요하지 않는다.

(2) 반환값이 필요한 경우 : 정리 함수

useEffect(() => {
  const handleResize = () => console.log("Window resized");
  window.addEventListener("resize", handleResize);

  // 정리 함수 반환
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

• 정리 함수가 컴포넌트가 언마운트되거나 의존성 배열이 변경될 때 호출된다.
• 이벤트 리스너를 해제하거나 리소스를 정리할 때 유용하다.

---

Q. JWT란 무엇인가?

📍 결론

"JSON 형식의 데이터를 안전하게 전송하기 위한 토큰 기반 인증 방식이다."

• JWT(JSON Web Token)
• 서버와 클라이언트 간의 인증 정보를 저장하고 전달하는 데 사용된다.
• 주로 로그인, 회원가입, 세션 관리 등에 사용되며, 상태를 유지하지 않는 인증 시스템을 구현할 때 유용하다.

✔ㅤJWT 구조

• Header : 토큰의 타입과 해싱 알고리즘을 명시한다.

{
  "alg": "HS256",
  "typ": "JWT"
}

• Payload : 인증과 관련된 정보를 담고 있다. 예를 들어 사용자 ID, 권한, 토큰 만료 시간 등의 데이터

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "exp": 1672531199
}

• Signature : 헤더와 페이로드를 특정 비밀 키로 암호화하여 생성한 서명이다. 이 서명 덕분에 JWT가 변조되지 않았음을 검증할 수 있다.

HMACSHA256(
  base64UrlEncode(header) + "." + base64UrlEncode(payload),
  secret
)

✔ㅤ작동 원리

1. 로그인 시 토큰 발급

• 사용자가 로그인하면 서버는 사용자의 인증 정보를 확인한 뒤, JWT를 생성하여 클라이언트에 반환한다.

2. 토큰 저장 및 사용

• 클라이언트는 받은 JWT를 로컬 스토리지나 쿠키에 저장한다.
• 이후 클라이언트는 요청 헤더 (ex. Authorization: Bearer <JWT> 에 토큰을 포함하여 서버로 요청을 보낸다.)

3. 토큰 검증 및 처리

• 서버는 받은 JWT의 서명을 확인해 변조 여부를 검증한 후, 페이로드의 정보를 사용해 요청을 처리한다.

💬ㅤJWT 장점

• 상태 비유지 : 서버는 세션 정보를 저장하지 않아도 되므로 서버 부하가 적다.
• 간편 확장성 : 여러 서비스 간 인증 정보를 공유하기 쉬워, 분산 시스템에서 유용하다.
• 안전한 데이터 전송 : 서명을 통해 변조 여부를 검증할 수 있어 보안이 강화된다.

✔ㅤ주의점

• 만료 시간 설정 : JWT는 기본적으로 만료 전까지 유효하므로, 만료 시간을 반드시 설정해야 보안을 유지할 수 있다.
• 토큰 탈취 방지 : HTTPS를 사용하여 네트워크 상의 토큰 탈취를 막고, 민간함 정보를 페이로드에 포함하지 않아야 한다.

---

Q. 왜 console에 같은 log가 2번 출력될까?

📍 결론

"React 개발 모드에서 React.StrictMode 가 활성화되어 있기 때문이다. "

• React.StrictMode 에서는 특정 코드가 예상대로 작동하는지 확인하기 위해 React 컴포넌트의 라이플 사이클 메서드와 일부 동작을 의도적으로 2번 호출한다.
• 이로 인해 console log도 2번 출력된다.

✔ㅤReact.StrictMode 란?

애플리케이션에서 잠재적인 문제를 감지하고 경고하기 위한 개발 도구이다. 배포 환경에서는 영향을 미치지 않는다.

• 컴포넌트의 부작용을 감지
• 오래된 API 사용 경고
• 예상치 못한 동작 방지

✔ㅤ두 번 호출되는 원리

1. Mount / Unmount

• 컴포넌트를 초기 마운트한 후 곧바로 언마운트했다가 다시 마운트한다. 이를 통해 깨끗하게 정리되지 않은 부작용을 감지한다.

2. 함수 컴포넌트 호출

• 함수 컴포넌트 내부에서 부작용이 발생하면 쉽게 감지할 수 있도록 함수가 2번 호출된다.

💬 StrictMode를 왜 사용해야 하나?

• 애플리케이션의 안정성과 코드 품질을 높이는 데 유리하다. 참고로 StrictMode 는 개발 과정에서만 동작한다.