개발하는데 다 이유가 있겠지

useState

• 자신의 상태 또는 props가 변경되면 Rerendering(리렌더링)
• useState는 상태 유지값과 그 값을 갱신하는 함수를 반환
• setState 함수는 새 state를 받아서 컴포넌트 리렌더링 큐에 등록
• 컴포넌트는 다음 렌더링 시에 useState를 통해 가장 최근에 갱신된 state를 적용

// state : 상태 유지값
// setState : 새로운 state를 받아서 리렌더링 큐에 저장(렌더링 될 때 가장 최근 state 적용)
const [state, setState] = useState(initialState);

 

useRef

• DOM(Document Object Model)이나 React Element에 접근하고자 할 때 사용
• useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환

const refContainer = useRef(initialValue);

---

카카오 로그인 OAuth 2.0

 

순서

1. 로그인 요청
   - 사용자가 로그인 버튼 클릭
   - 애플리케이션은 카카오 인증 서버로 사용자를 리다이렉트(REST API 키, 리다이렉트 URI 등 필요한 정보 전달)
2. 사용자 인증 및 동의
   - 사용자에게 계정 로그인 요청 및 정보 제공 범위에 대한 동의(인가)
3. 인가 코드 발급
   - 사용자가 로그인하고 동의(인가)하면 설정한 리다이렉트 URI로 인가 코드(Authorization Code)를 전달
4. 토큰 요청
   - 전달받은 인가 코드를 사용해 카카오 토큰 발급 API에 접근해, 액세스 토큰과 리프레시 토큰을 발급
5. 사용자 정보 획득
   - 액세스 토큰을 사용해 카카오 사용자 정보 API에 접근 및 사용자 정보 사용
6. 로그인 처리
   - 가져온 사용자 정보를 기반으로 자체 로그인 처리 수행(회원 정보 조회, 신규 회원가입 등)

---

주의사항

1. 인가 코드는 유효 시간이 짧기 때문에, 발급받은 후 즉시 토큰 요청에 사용해야함
2. 액세스 토큰 또한 유효시간이 짧기 떄문에, 만료되기 전에 리프레시 토큰을 사용해 갱신해야함
3. 보안을 위해 REST API 키와 같은 중요한 정보는 클라이언트 측에 노출되지 않도록 주의해야함(.env로 관리 등)

---

특이사항

1. .env 환경 변수 사용해 중요 정보(API KEY 또는 개인정보 등) 숨기기

// 기존 방식
export const process.env.REACT_APP_API_URL
REACT_APP_API_URL = API_KEY 값

// ------------------------------------------------------ //

// vite 처리방식
// vite는 앞에 'VITE_'라고 명시를 해야함
export const API_KEY = import.meta.env.VITE_KAKAO_APP_API_KEY
VITE_KAKAO_APP_API_KEY= API_KEY 값