Raect (3) 썸네일형 리스트형 [React] 클래스형, 함수형 컴포넌트를 통한 Counter 본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다. 1. 클래스형 컴포넌트를 통한 Counter 클래스형 컴포넌트를 만들기 전에, 기본적으로 알아야 할 state와 props에 대한 간단한 설명을 하자면, state는 클래스형 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 또한, props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, props를 사용하는 컴포넌트는 읽기 전용으로만 사용할 수 있습니다. props의 변화를 주기 위해선, 부모 컴포넌트에서 바꾸어 주어야 합니다. 1.1) 클래스형 App.js 생성 import React, { Component } from 'react'; class App extends Component { render() { retu.. [React] props 본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다. 1. props props는 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 아래와 같이 컴포넌트에 properties로 전달되는 name값을 자식 컴포넌트인 Mycomponent가 props.name을 전달받습니다. -app.js import React from "react"; import "./App.css"; import MyComponent from "./components/myComponent"; function App() { return ( ); } export default App; -components/myComponent.js import.. [React] 함수형 vs 클래스형 컴포넌트 1. React에서 컴포넌트를 어떻게 생성하나요? 리액트에서 컴포넌트를 생성하는 방법은 크게 두 가지가 있습니다. 1.1) 클래스형 컴포넌트 리액트에서 컴포넌트를 정의할 때 EcmaScript6에 도입된 class문법에 의해 정의된 컴포넌트를 클래스형 컴포넌트라고 합니다. 컴포넌트에서 라이프사이클 API를 사용해야 하거나 state를 사용하는 경우 클래스형 컴포넌트로 정의해야 합니다. (하지만, 리액트 16.8 버전에서 새롭게 공개된 Hook을 사용하면, 함수형 컴포넌트에서도 state를 사용할 수 있습니다.) 리덕스를 사용하여 Container, Presentational 컴포넌트를 구성할 때, 여기서 Container 컴포넌트가 클래스형 컴포넌트에 해당합니다. import React, {Compone.. 이전 1 다음
