리액트 기본 개념을 알아보자.

이번 글을 리액트의 기본적인 개념을 간단하게 적어보려고 한다. 개념을 알고 리액트를 공부하면 기본적인 것을 왜 사용하는지에 대한 이유를 알 수 있을 것이다.

 

1. React란 무엇인가?

• React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다.
• 재사용 가능한 UI 컴포넌트를 생성하는 데 사용된다. 페이스북에서 개발하고 관리한다.

2. React를 사용하는 이유는 무엇인가?

• 동적 애플리케이션 쉽게 만들 수 있다.
  • React를 사용하면 적은 코딩으로 더 많은 기능을 제공하여 동적 웹 애플리케이션을 쉽게 만들 수 있다.
• 성능 향상
  • React는 가상 DOM을 사용하여 웹 애플리케이션의 성능을 높임
• 재사용 가능한 컴포넌트
  • 컴포넌트는 React 애플리케이션의 구성 요소로, 애플리케이션 전체에서 재사용할 수 있어 개발 시간을 크게 단축할 수 있다.
• 단방향 데이터 흐름
  • React는 단방향 데이터 흐름을 따르므로 디버깅이 쉽고 애플리케이션의 오류 위치를 파악할 수 있다.
• 쉬운 디버깅
  • 페이스북이 발표한 크롬 확장 프로그램을 사용하여 React 애플리케이션을 디버깅할 수 있어 프로세스가 빠르고 쉬워짐.

3. React의 동작 방식은 어떻게 되나?

• React는 컴포넌트 기반으로 동작한다. 컴포넌트는 애플리케이션의 독립적이고 재사용 가능한 코드 조각이다. 각 컴포넌트는 자체 state와 props를 가지고 있다. React는 가상 DOM을 사용하여 변경된 부분만 실제 DOM에 반영한다.

4. 가상 DOM이란 무엇인가?

• DOM은 Document Object Model을 나타낸다. DOM은 HTML 문서를 논리 트리 구조로 표현한다. 트리의 각 분기는 노드로 끝나고 각 노드에는 객체가 포함된다. React는 메모리에 실제 DOM의 경량화된 표현을 유지하는데, 이를 가상 DOM이라고 한다. 객체의 상태가 변경되면 가상 DOM은 실제 DOM에서 해당 객체만 변경한다.

5. React와 React Native의 차이점은 무엇인가?

React:

• 출시일: 2013년
• 플랫폼: 웹
• HTML 사용: 가능
• CSS 사용: 가능
• 사전 지식: JavaScript, HTML, CSS

React Native:

• 출시일: 2015년
• 플랫폼: 모바일(안드로이드, iOS)
• HTML 사용: 불가능
• CSS 사용: 불가능
• 사전 지식: React.js
  

6. React에서 state란 무엇인가?

state는 컴포넌트의 데이터나 정보를 포함하는 React의 내장 객체입니다. 컴포넌트의 state는 시간이 지남에 따라 변경될 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링됩니다. state 변경은 사용자 작업이나 시스템 생성 이벤트에 대한 응답으로 발생할 수 있습니다. 컴포넌트의 동작과 렌더링 방식을 결정합니다.

7. React에서 state는 어떻게 구현하나?

React 16.8 버전부터 도입된 Hooks API 중 하나인 useState 훅을 사용하여 함수형 컴포넌트에서 state를 구현할 수 있습니다. useState 훅은 state 변수와 해당 변수를 업데이트하는 setter 함수를 반환합니다.

state 값을 업데이트하려면 setter 함수를 호출해야 하며, React는 자동으로 컴포넌트를 다시 렌더링하여 업데이트된 state 값을 반영합니다.

React에서 state는 컴포넌트 내부에서 관리되는 상태 값으로, 시간에 따라 변할 수 있는 동적인 데이터를 저장하고 관리하는 데 사용됩니다.

 

8. state와 props의 차이점은 무엇인가?

state:

• 용도: 컴포넌트에 대한 정보 보유
• 변경 가능성: 변경 가능
• 읽기 전용: 변경될 수 있음
• 하위 컴포넌트: 하위 컴포넌트가 액세스할 수 없음
• Stateless 컴포넌트: state를 가질 수 없음

props:

• 용도: 다른 컴포넌트에 데이터를 전달하는 것을 허용
• 변경 가능성: 변경 불가능
• 읽기 전용: 읽기 전용
• 하위 컴포넌트: 하위 컴포넌트가 액세스할 수 있음
• Stateless 컴포넌트: props를 가질 수 있음

9. parsing, rendering 차이점

parsing(파싱)

• 웹 페이지의 내용을 분석하고 해석하는 과정이고, 웹 브라우저는 HTML을 DOM 트리로 파싱한다.
• 문서를 파싱한다는 것은 코드에서 사용할 수 있는 구조로 document를 변환한다는 것이다.이를 위해 토큰화를 거쳐 이 토큰을 사용해 문서 구조를 이해해 DOM트리, CSSOM 트리로 표현된다.

rendering(렌더링)

• html css js로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것이다.

10. render()

• 함수 컴포넌트가 호출이 되면 render함수가 호출된다. 또한, props, state가 변경될 때 예전에 렌더링된 요소와 새로 return된 요소를 비교한다.
• rerendering state, props가 변경 시 render함수가 발생한다.

11. React.Fragment

function MyButton() {
  return <></>
}
export default MyButton;

• React.Fragment의 장점은 의미없는 div 태그를 사용함으로써 실제 DOM에 노드를 추가하지 않아도 된다.

12. Props, State

• props는 컴포넌트에 전달되는 값이다.
• state 컴포넌트의 내부적으로 가지고 있는 값이다.
• 리액트에서 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전달은 단방향으로 이루어진다. 즉, 부모에서 자식으로만 props를 통해 데이터를 전달할 수 있다. 하지만 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내야 하는 경우가 있다. 이때 사용하는 방식이 바로 "부모 컴포넌트에서 자식 컴포넌트에 props로 setter 함수를 전달하는 방식"이다. 이는 자식에서 부모로 실제 데이터를 전달하는 것이 아니라, 부모의 상태를 변경하게 되므로 부모 컴포넌트의 상태가 업데이트되어 자식에 영향을 미치게 된다.

13. useState

• useState는 상태를 변경하는 hooks이다. setState 함수로 state 값을 변경할 때마다 컴포넌트는 다시 렌더링 된다.

14. useEffect

• side effect를 만들기 위한 훅이다. 또한, 의존성 배열이 있다.

15. useMemo & useCallback(메모이제이션)

• 리액트에서는 state나 props가 변할 경우 리렌더링이 발생하는데 이때 변하지 않아도 되는 변수들도 새롭게 선언이 되는 문제가 있다. 이때 메모이제이션을 사용한다.
• 같은 값을 리턴하는 함수를 반복해서 호출할 때, 맨 처음 값을 계산해서 메모리에 저장해서 꺼내 쓰는 기법이다. 즉, 자주 쓰는 값을 맨 처음에 캐싱해 둬서 값이 필요할 때 마다 사용하는 것이다.
• useMemo & useCallback은 렌더링 오버헤드를 줄일 수 있다.
• useCallback은 함수를 메모이제이션 할 때 사용한다.
  useMemo는 연산된 값을 기억한다면 useCallback 함수를 기억합니다
  

16. useRef

• ref를 통해 생성된 참조 객체에서 실제 DOM 요소에 접근할 때 사용한다.
• 리액트 외부에서 발생하는 이벤트에 사용한다.
• 리렌더링에 영향을 받지 않는 값을 저장하는 데 사용한다. ex) 스크롤 위치 조작, 클립보드 DOM text를 저장
• 이전 상태 값을 기억하는 용도로 사용됨

17. ref vs state

ref

• ref를 바꾼다고 해서 리렌더링이 일어나지 않으며 변수 값이 유지됨
• 주로 DOM 요소에 직접 접근할 때 사용된다.

state

• state 변경되면 렌더링 발생하고 모든 변수가 초기화된다.
• 컴포넌트 렌더링에 직접 영향 미치는 데이터를 관리할 때 사용한다

18. Redux란 무엇인가?

• Redux는 애플리케이션 상태를 관리하는 데 사용되는 오픈 소스 JavaScript 라이브러리이다. React는 사용자 인터페이스를 구축하기 위해 Redux를 사용한다. Redux는 JavaScript 애플리케이션을 위한 예측 가능한 상태 컨테이너로, 전체 애플리케이션의 상태 관리에 사용된다.

19. Redux의 구성 요소는 무엇인가?

• Store: 애플리케이션의 상태를 보유함
• Action: 저장소에 대한 정보의 출처이다.
• Reducer: 저장소로 전송된 액션에 대한 응답으로 애플리케이션의 상태가 어떻게 변경되는지 지정한다.

20. Flux란 무엇인가?

Flux는 Facebook이 웹 애플리케이션을 구축하기 위해 사용하는 애플리케이션 아키텍처이다. 클라이언트 측 애플리케이션 내에서 복잡한 데이터를 처리하는 방법이며 React 애플리케이션에서 데이터 흐름을 관리한다. 데이터의 단일 출처(저장소)가 있으며 특정 작업을 트리거하는 것이 저장소를 업데이트하는 유일한 방법이다. 작업은 디스패처를 호출한 다음 저장소가 트리거되고 자체 데이터에 따라 업데이트된다. 디스패치가 트리거되고 저장소가 업데이트되면 변경 이벤트를 내보내 뷰가 그에 따라 다시 렌더링될 수 있다.