React 2

[React] 컴포넌트와 props

컴포넌트 리액트는 컴포넌트 기반의 구조를 가지고 있다. 컴포넌트 기반이라는 것은 작은 컴포넌트가 모여 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다는 뜻이다. 리액트 컴포넌트의 역할은 props를 받아서 리액트 엘리먼트를 리턴하는 것이다. 이러한 컴포넌트와 엘리먼트의 관계는 클래스와 인스턴스의 개념과도 유사하다. props 위에서 props를 받아 엘리먼트를 리턴한다고 했는데, 여기서 props는 property의 줄임말 prop에 s를 붙여 복수형으로 만든 것으로, 리액트 컴포넌트의 속성을 말한다. props는 컴포넌트의 모습과 속성을 결정지으며, 컴포넌트에 전달한 다양한 정보를 담고 있는 자바스크립트 객체이다. props의 특징 props의 중요한 특징 중 하나는 읽기..

React 2024.01.17

[React] 엘리먼트 렌더링

엘리먼트란? 리액트 엘리먼트는 리액트 앱의 가장 작은 단위이다. 리액트 엘리먼트와 DOM 엘리먼트는 다른 것인데, DOM 엘리먼트는 실제 브라우저의 존재하는 엘리먼트이고, 리액트는 Virtual DOM 에 존재한다. 그렇기에 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이라고 할 수 있다. (뭔소리지?) 그리고 리액트 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보는 DOM 엘리먼트가 만들어진다. const element = Hello, world 이런 JSX 코드가 실행될 때, 대입연산자는 createElement() 함수를 사용해서 리액트 엘리먼트를 생성하게 된다. 그리고 리액트는 이러한 리액트 엘리먼트를 이용해서 실제 화면에서 보이는 DOM 엘리먼트를 생성하게 된다. 엘리먼트의 생김새 리액트 엘리..

React 2024.01.15