React9 Components 와 Props 의 정의 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트 조합으로 구성될 수 있다. 이렇게 하나의 컴포넌트를 반복적으로 사용하기 때문에 전체 코드의 양을 줄일 수 있다는 장점이 있다. 리액트 컴포넌트는 개념적으로 자바스크립트의 함수와 비슷하다. 함수가 입력을 받아 출력을 하는 것 처럼, 리액트 컴포넌트도 입력을 받아 정해진 것을 출력한다. 그렇기 때문에 리액트 컴포넌트를 함수라고 생각하면 좀더 쉽게 개념을 이해할 수 있을 것이다. 하지만 리액트 컴포넌트의 입력과 출력은 일반적인 자바스크립트 함수와는 조금 다르다. 이 그림을 보면, 리액트 컴포넌트에서의 입력은 Props 이고 출력은 React element 가 된다. 결국 리액트 컴포넌트가 해주는 역할은, 어떠한.. 2022. 7. 13. Elements 란? (특징 및 렌더링하기) React Elements 는 아주 중요한 특징을 가지고 있는데, 그것이 바로 불변성이다. 불변성은 말 그대로 변하지 않는 성질을 의미하고, 이는 한 번 생성된 Elements 는 변하지 않는다는 것을 의미한다. 이를 다르게 표현하면 Elements 생성 후에는 children 이나 attributes 를 바꿀 수 없다는 것이다. 그렇다면 React Elements 는 우리 눈에 보이는 것을 기술하는 것인데, Elements 가 변할 수 없다면 화면 갱신이 불가능하지 않을까? 라는 의문을 가질 수 있다. 이런 의문을 해소하려면 Elements 의 불변성에 관한 설명을 다시 살펴보아야 한다. Elements 생성 후에는 children 이나 attributes 를 바꿀 수 없다 즉, Elements 는 다.. 2022. 7. 5. Elements 란? (정의와 생김새) Elements 의 사전적 의미 : 어떤 물체를 구성하는 성분 React 에서 Elements 란? React 앱을 구성하는 가장 작은 요소들 Elements 는 원래 웹사이트에 대한 모든 정보를 담고 있는 DOM에서 사용하는 용어이기 때문에 기존에는 Elements 라 하면 아래와 같은 DOM Elements 를 의미하는 것이었다. 그렇다면 React Elements 와 DOM Elements 는 어떤 차이가 있을까? React 가 개발되기 시작한 초창기에는, '화면에 나타내는 내용을 기술하는 자바스크립트 객체' 를 일컫는 용어가 필요했다. 그래서 처음에는 '기술하다' 라는 의미를 가진 영단어 discript 에서 파생된 Descriptor 라고 불렸는데, Descriptor 가 최종적으로 DOM El.. 2022. 7. 5. JSX 의 장점 JSX 를 사용하는 것이 필수는 아니지만 JSX 를 사용했을 때 얻을 수 있는 장점이 많기 때문에 사용하는 것을 권장한다. 그렇다면 JSX 를 사용했을 때, 어떤 장점들이 있을까? 1. 코드가 간결하다 // JSX 를 사용한 코드 Hello, {name} // JSX 를 사용하지 않은 코드 React.createElement('div', null, 'Hello, ${name}'); 이 두 개의 코드는 모두 동일한 역할을 한다. JSX 를 사용한 코드의 경우, HTML 의 div 태그를 사용해서 name 이라는 변수가 들어간 인사말을 표현하고 있다. JSX 를 사용하지 않은 코드의 경우 React 의 createElement() 함수를 사용하여 동일한 작업을 수행하게 한다. 이전에 작성한 포스트에서 본 것.. 2022. 7. 3. 이전 1 2 3 다음
