1. React란 무엇인가?
React는 사용자 인터페이스(UI)를 만들기 위한 Javascript의 라이브러리이다.
컴포넌트 기반으로 구성되어 재사용성과 유지보수성이 뛰어나다.
2. React의 주요 특징은?
- 컴포넌트 기반이다 -> UI를 작은 단위의 재사용이 가능한 컴포넌트로 나누어서 개발한다.
- JSX를 사용한다. -> Javascript XML의 줄임말로, Javascript 코드 안에 HTML을 작성할 수 있는 문법이다.
- Hook을 통해서 상태를 관리한다. -> Hook이란 함수형 컴포넌트에서도 React 기능을 쓸 수 있게 해주는 함수이다.
- 선언형 프로그램이다. -> UI가 어떤 상태에 따라 보여질지에 대한 선언을 중심으로 코드를 구성한다.
컴포넌트 : 기본적으로 HTML 요소를 반환하는 React 함수 혹은 클래스이다.
3. 함수형 컴포넌트 ? 클래스형 컴포넌트?
- 함수형 컴포넌트 : 함수처럼 생긴 컴포넌트이다.
-> 문법이 간단해서 코드가 깔끔하다.
-> 최신 리액트에서 사용- 클래스형 컴포넌트 : JavaScript 클래스 문법을 사용해서 만든 컴포넌트이다.
-> this의 사용이 필요하다.
-> 요즘엔 거의 사용하지 않는다.
차이점
- 상태와 생명주기를 다루는 방식
클래스형 컴포넌트 : this.state로 상태를 정의하고 생명주기 메서드를 오버라이드하여 수행한다.
함수형 컴포넌트 : useState 훅을 통해 상태를 정의하고 useEffect 훅을 사용해 생명주기를 다룬다.
4. state와 props의 차이
props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터이다. 그러기에 자식 컴포넌트에서 상속받은 데이터를 변경할 수 없다.
state는 자기 자신의 컴포넌트 안에서 만들어낸 데이터이며 변경할 수 있다.
5. React에서 key가 필요한 이유
key는 리스트 렌더링 시 각 항목을 고유하게 식별하기 위한 값으로, 어떤 항목이 추가, 삭제, 변경 되었는지 파악하기 위해 고유한 식별자가 필요하다.
6. key를 인덱스로 사용하면 안되는 이유
key를 인덱스로 사용하게 되면, 리스트 중간에 아이템이 추가되면 인덱스들이 밀리거나 당겨져서 key 값이 바뀌어버린다.
-> React가 다른 요소로 인식하여, 기존 컴포넌트를 재사용하지 못하고 다시 렌더링 하게 된다.
7. useState VS useEffect
- useState는 상태값을 저장하고 갱신하는 훅이다.
-> 컴포넌트가 다시 렌더링 될 때 상태값이 유지된다.- useEffect는 컴포넌트가 렌더링된 이후 특정 작업을 실행할 수 있게 해준다.
-> 첫 번째 인자 : 실행할 함수
-> 두 번째 인자 : 의존성 배열 (빈 배열 [ ] 이면 컴포넌트 처음 생성할 때 한 번만 실행,
특정 상태를 넣으면 상태가 바뀔때마다 실행)
8. Virtual DOM
Virtual DOM은 가상의 DOM으로 UI 변경 시 실제 DOM과 비교해서 최소한의 변경사항을 실제 DOM에 반영하는 기술이다.
- 실제 DOM을 조작하려면 렌더링 비용이 크고, 성능 저하가 발생할 수 있다.
빠르고 효율적인 렌더링을 위해서 상태가 바뀔 때마다 전체 DOM을 바꾸는 대신
변경된 부분만 최소한으로 반영한다.- React는 렌더링 이전에 화면 구조를 나타내는 가상돔 1개와, 렌더링 이후 보이게 될 화면 구조를 나타내는 가상돔 1개를 보유한다.
9. React 생명주기
리액트 컴포넌트는 생성(mount) > 업데이트(update) > 제거(unmount)의 생명 주기를 갖는다.
마운트 시 호출되는 메서드
constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
render: 컴포넌트를 렌더링 해주는 메서드
componentDidMount: 컴포넌트의 첫 번째 렌더링이 끝나면 호출되는 메서드
업데이트시 호출되는 메서드
getDerivedStateFromProps: 컴포넌트의 props나 state가 바뀌었을때 호출된다.
sholudComponentUpdate: props 또는 state를 변경했을 때, 컴포넌트가 리렌더링 할지 말지 결정하는 메서드
반드시 true 또는 false 값을 반환해여 하며, false를 반환할 경우 업데이트 과정은 중단된다.
render: 컴포넌트를 리렌더링 한다.
getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
componentDidUpdate: 리렌더링(업데이트) 작업이 완료된 후 실행하는 메서드
언마운트시 호출되는 메서드
componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
10. state를 직접 바꾸지 않고 useState를 사용하는 이유
useState의 setter함수를 통해 상태를 변경해야 React가 변화를 감지할 수 있고, 컴포넌트를 다시 렌더링 할 수 있다.
state는 컴포넌트의 데이터를 저장하는 값이고, setState는 해당 데이터를 업데이트하고 컴포넌트를 자동으로 리렌더링 해주는 함수이다.
그래서 state 값을 직접 변경하면 React가 변경을 감지하지 못해 리렌더링이 발생하지 않으며, 화면에도 변경된 값이 반영되지 않는다.
state의 불변성을 유지하는 이유
React에서 상태의 값이 새로 없데이트 되어도 바뀐 값을 감지하지 못한다.
-> 이전상태와 새로운 상태롤 비교할 때 두 상태가 같은 객체를 참조하고 있다고 판단되면 리액트는 상태가 변경되지 않았다고 판단한다.
11. ContextAPI
context는 리액트 컴포넌트 간에 값을 공유할 수 있게 해주는 기능으로, 주로 전역적으로 필요한 값을 다룰 때 사용한다.
JMove 프로젝트에서 로그인상태를 전역적으로 관리해주기 위해서 사용했다.
12. React는 라이브러리인가, 프레임워크인가
프레임워크는 전체적인 흐름을 프레임워크가 제어하고, 개발자가 그 안에서 규칙에 의해 코드를 작성하지만
라이브러리는 개발자가 전체적인 흐름을 제어하고 필요한 시점에 라이브러리를 사용합니다.
React는 개발자가 원하는 방식으로 사용할 수 있도록 유연성을 제공하여, React가 라이브러리라고 불리는 이유이다.
13.
