컴포넌트3 React.js - 리액트, 클래스형 컴포넌트(Class Component)란? 클래스형 컴포넌트 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간은 클래스형 컴포넌트에 대해 알아보겠습니다. 기본적으로 클래스형 함수는 state, lifeCycle 관련 기능 사용을 사용 가능하다는 점이 있습니다. 그리고 함수형 컴포넌트보다 조금 더 메모리 자원을 많이 사용하는 큰 특징이 있습니다. ● 2. 클래스형 컴포넌트를 만드는 방법은 맨 앞에 class 사용하면서 시작합니다. 그리고 "render()" 메서드를 사용합니다. 이 메서드를 통해서 JSX을 렌더링 할 수 있습니다. props를 조회할 때 this를 사용하는 특징이 있습니다. 1번 라인 : class로 시작합니다. 2번 라인 : render() 메서드를 사용합니다. class ClassComponent extends React.. 2021. 2. 13. React.js - 리액트, 함수형 컴포넌트(Functional Component)란? 함수형 컴포넌트를 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 컴포넌트의 종류 중에 하나인 함수형 컴포넌트(Component)를 알아보도록 하겠습니다. v16.8 버전 이전까지는 클래스형 컴포넌트를 사용했었지만 이후부터는 함수형 컴포넌트에 훅을 지원해주어서 함수형 컴포넌트를 함께 사용할 것을 공식 문서에서 권장하고 있습니다. ● 2. 먼저 가장 기초적인 사용 방법을 알아봅니다. 이미 이전 소스에서도 많이 보아왔던 방식입니다. 지금까지 저와 함께 했던 이 방식이 바로 함수형 컴포넌트를 생성하는 방식이었습니다. 2번 라인 : 함수형으로 function을 선언한다. // 보통의 방식 function Guest(props) { return ( Hi! {props.name} ); } ● 3. 만약.. 2021. 2. 12. React.js - 리액트, 컴포넌트(Component)란? 컴포넌트에 대해 알아보자 안녕하세요. 고코더 입니다. ● 1. 이번 시간부터는 리액트의 가장 중요한 요소인 컴포넌트(Component)를 알아보는 시간을 가져 보겠습니다. 컴포넌트는 템플릿 이상의 기능을 수행합니다. 데이터를 UI로 만들어 주는 기능을 합니다. 라이프 사이클 API를 통해 컴포넌트가 화면에 나타내는 변화를 작업들을 수행합니다. ● 2. 사이트를 구성하는 예를 들어보겠습니다. 기본적인 홈페이지의 구조는 아래 그림과 같습니다. 헤더, 바디, 푸터로 나뉘어 있습니다. 헤더와 푸터에는 사이트에서 제공하는 기본 내용들이 담겨 있습니다. 그리고 몸통 부분은 바디의 내용이 바뀌는 게 지금까지 많이 개발되어온 구조입니다. 그렇게 하나의 홈페이지가 만들어집니다. ● 3. 컴포넌트란 기능을 단위별로 캡슐화.. 2021. 2. 12. 이전 1 다음
