React

[React] React 기초

ui-o 2023. 10. 13. 17:49
반응형

React 정의

- Meta 에서 만든 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용
- 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움


React 특징

  • 새로고침 없이 다른 페이지 이동가능
  • JSX 사용
  • Component이 조합 구성 - 재사용성 향상으로 개발 기간 단축, 유지보수 용이
  • Virtual DOM 사용하여 DOM 업데이트를 추상화 함으로 처리 횟수를 최소화하여 효율적으로 관리하여 빠른 처리가 가능
  • React Native를 활용하여 앱 개발 가능
  • 지속적인 버전 업데이트 및 라이브러리로 인한 방대한 학습 진행과 상태 관리(state)가 복잡한 단점이 있음

리액트 DOM 업데이트 과정

  1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 Rerendering
  2. 이전 Virtual DOM과 비교
  3. 바뀐 부분만 실제 DOM에 적용

React  클래스 

클래스 구성요소는 render()를 포함해야 하며, return은 반드시 하나의 상위요소만 반환 가능

class Exam extenns Component {
	render(){
        return (

        )
    }
}

render 메서드

  • 화면에 뭔가를 출력하기 위해 반드시 필요한 기본 메서드
  • 초기 렌더링으로 컴포넌트가 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
  • 반드시 단 하나의 리액트 요소를 리턴해야 함

초기 렌더링 과정

  1.  최상위 컴포넌트 렌더링 작업 수행
  2.  HTML마크업 생성
  3. 정한 실제 페이지의 DOM 요소 안에 주립
반응형

'React' 카테고리의 다른 글

[React] React Props  (1) 2023.10.20
[React] React Hook  (0) 2023.10.18
[React] React Component  (2) 2023.10.15
[React] React Element  (0) 2023.10.15
[React] JSX  (0) 2023.10.13