[기술 면접] 📘 React

📋 기억하고 싶은 내용

📌 Lifecycle API

• 마운트 - 컴포넌트가 브라우저 상에 나타날 때
• 업데이트 - 컴포넌트의 props나 state가 업데이트 될 때
• 언마운트 - 컴포넌트가 브라우저 상에서 사라질 때

📌 JSX(JavaScript XML)

• 자바스크립트에 XML(eXtensible Markup Langauge)을 추가한 것
• 공식적인 자바스크립트 문법은 아님

사용 이유

• 하나의 파일에서 자바스크립트와 HTML을 동시에 작성할 수 있어 편리함

📌 Hooks

• Class Component의 불편함을 해결하기 위해 Functional Component를 사용하는 리액트 훅이 등장함
• Functional Component에서 state를 가질 수 있게 해줌
• 리액트 훅으로 함수형 컴포넌트에서도 클래스형 컴포넌트 작업들을 할 수 있게 됨

📌 클래스형 컴포넌트 VS 함수형 컴포넌트

클래스형 컴포넌트

• class
• Component를 상속 받음 (extends Component)
• render() 함수가 필요
• state와 생명 주기 함수들을 사용할 수 있는데, state를 컴포넌트 내에서 구현하기 때문에 복잡한 UI 로직을 갖고 있음
• constructor, this, binding 등 지켜야 할 규칙이 많아 코드가 길고 복잡

함수형 컴포넌트

• state를 사용하지 않고, props를 통해 데이터를 받아 UI에 뿌려줌

공식 문서에서는 함수형 컴포너트와 함께 훅을 사용하는 것을 권장하고 있음

📌 Redux

• 상태 관리를 도와주는 라이브러리

사용 이유

• props를 사용하지 않고도 store에서 상태를 꺼내 사용할 수 있음
• 주로 로그인 후 유저의 인증 정보를 유지하기 위해 사용함

📌 State VS Props

• 데이터를 처리하기 위해 사용

Props

• Properties의 줄임말
• 불변의 데이터
• 부모 컴포넌트에서 상속 받은 데이터이며, 직접 수정이 불가능

State

• 컴포넌트 내부에서 생성되고, 값 변경이 가능

🔗 참고 래퍼런스

• 리액트 라이프사이클의 이해
• JSX 소개 - React Doc
• Hooks의 개요 - React Doc
• 클래스형 컴포넌트와 함수형 컴포넌트
• Redux란?
• Component와 props, state