# Class Component

qmflf556

서론 클래스형 컴포넌트에서 이벤트를 어떻게 다루는지에 대한 수업을 받았다. 그중에서도 이번 포스트에서는 새로 알게된 사항에 대해 정리하고자 한다. Event Handling 기본 DOM 요소에만 이벤트 설정 React 에서의는 자체적으로 만든 컴포넌트가 아닌 기본 DOM 요소에만 이벤트를 설정할 수 있다. 그저 `` 라고만 하면 MyButton 에 onClick 을 통해 클릭 이벤트를 설정하는 것이 아닌 onClick 이라는 이름의 props 를 전달하게 된다. 그래서 자체적으로 만든 컴포넌트에 이벤트를 설정하려면 이벤트를 props 로 전달하고 그 컴포넌트 내부에서 기본 DOM 요소에 전달해야 한다. 클래스 컴포넌트에서 this binding, 화살표 함수 사용 클래스 컴포넌트의 state 는 반드시 객체여야 한다. 이때 state 를 변경하기 위해서 setState 를 사용해야 한다. state

gyuri092

클래스형 컴포넌트 함수형 컴포넌트 리액트를 공부하다 보면 위의 두가지 형태의 컴포넌트를 발견할 수 있다. 최근에 리액트를 배우기 시작한 사람들은 아마 대부분 후자 컴포넌트인 함수형 컴포넌트를 주로 사용하고 있을 것이다. 하지만 아직까지 클래스형 컴포넌트를 사용하는 회사나 팀도 있다고 하니 클래스형 컴포넌트가 무엇이고, 함수형 컴포넌트와는 어떤 차이가 있는지 알면 좋을 것이다. 그리고 왜 이제는 대다수가 함수형 컴포넌트만을 사용하려는지까지 알게된다면 더욱 개발에 도움이 될 것 이다. 클래스형 컴포넌트란? > Component is the base class for the React components defined as JavaScript classes. (클래스형)컴포넌트는 자바스크립트 클래스로 정의된 React 컴포넌트의 베이스 클래스입니다. -리액트 공식문서([react.dev](https://react.dev/re

wjd489898

ChatGPT 써볼까...? 최근 주변에 개발자 친구들을 만나면서 들었던 질문이 있다. 너희도 개발할 때 ChatGPT 사용해? 였다. 첨에 그 질문을 들었을때 반감과 의문이 들었다. 바로 들었던 생각은 아니? 너는 어떨때 사용해? 였다. 막연히 코드는 개발자가 스스로 짜야하며 아직 주니어 레벨인 내가 스스로 사고가 아닌 도구를 사용하여 코드를 작성한다는 거에 거부감이 있었던거 같다. 또한, 짧지만 2년간 개발을 하면서 한개의 함수를 작성하더라고 그 함수의 역할이 거기서 끝나는 것이 아니라 다양한 곳에서 발생시킬 영향을 고려하면서 작성했었다. 하지만 친구가 대답해준 코드를 정리하거나 쿼리를 짤 때 사용해 답에는 더더욱 의문점이 발생했다. 그 함수에 대한 코드는 정리가 되더라도 만약에 정리된 부분이 다른 부분에서 문제를 발생시킬수 있지 않나? 그래서 변명아닌 변명으로 우리 회사는 아직 ChatGPT 유료버전을 지원해주지 않아. 팀장님도 별말 없으시네 라고 말을

sju4486

✅ Class Component 이제는 잘 사용하지 않는다. 그래도 알아둘 필요는 있다. 클래스형 컴포넌트를 사용하는 프로젝트를 유지보수하게 되는 일이 있을 수도 있고, 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있다. 선언 방식 >tsx import React, { Component } from "react"; > class AppClass extends Component { state = { count: 0, }; render() { return ( Class {this.state.count} ); } } > export default AppClass; 클래스에서는 직접 state 오브젝트를 만들고, this를 이용하여 접근해 count를 보여줄

igam94

코드의 간결성: Hooks를 사용하면 클래스 컴포넌트보다 코드가 더 간결해짐. Hooks를 사용하면 상태 관리와 생명주기 처리를 하나의 함수에서 처리 가능 > 재사용성: Hooks를 사용하면 코드를 재사용하기 쉬워짐 Hooks는 독립적인 함수로 작성되기 때문에 다른 컴포넌트에서도 쉽게 사용할 수 있다 > 유지보수성: Hooks를 사용하면 코드의 가독성과 유지보수성이 좋아짐 Hooks는 함수형 프로그래밍의 개념을 따르기 때문에 부작용(side effect)이 적고 코드가 예측 가능 > 클래스의 단점 보완: 클래스 컴포넌트는 상태를 관리하기 위해 this를 사용하는데,코드를 이해하기 어렵다. 클래스 컴포넌트에서는 코드의 재사용성이 낮다 > 성능: Hooks는 불필요한 렌더링을 방지하는 최적화 기능을 제공한다

gazero_

🌸🌸 Hook (나? 리액트의 꽃인듯) 🌸🌸 Hook의 탄생비화 줄거리(summary 랄까? 암튼 그런거) class형 컴포넌트는 state와 Life Cycle의 관리가 가능하지만 컴포넌트 상태로직을 재활용하기 어렵고, this의 동작방식의 오류 가능성이 있으며 메모리 자원을 낭비한다는 단점이 있었다. 그리하여 state관리와 Life Cycle관리는 불가능하지만 메모리 자원의 낭비를 줄일 수 있다는 함수형컴포넌트를 사용하기에 이르렀다. cf. 메모리 자원 낭비? 모르겠는데? 그럴수있찌! 예를 들어서 class형 컴포넌트에서는 setState()함수를 통해 "모든" state를 업데이트 했단말얏! 그런데 useState()함수를 사용하면 변수 "각각"에 set함수가 존재하게 되는데 이거를 개별적으로 관리할 수 있게되는거얏!! > 함수형 컴포넌트에 state와 Life Cycle관리를 연동할 수 있게 하는 함수를 생각해 냈는데........이것

gazero_

Component의 종류! >Component는 크게 class형 컴포넌트와 함수형 component로 나뉜다 ! 1. Class형 컴포넌트 클래스형 컴포넌트의 특징 class 그리고 component 상속이 필수임 render가 필수임 props를 조회할 때 this를 사용함 state(상태)를 사용함 life cycle과 method를 이용 클래스형 컴포넌트의 문제점 > #### 1. 컴포넌트 상태로직을 재활용하기 어려움 클래스 컴포넌트는 state를 저장할 수 있다는 편의성 덕분에 클래스 컴포넌트가 사용되어 왔으나, 이는 컴포넌트 간의 중복이 많다는 문제점 때문에 규모가 큰 컴포넌트가 만들어 진다. 즉, 유지보수와 테스팅에 불리하다. 👍 이를 보완하기 위해, HOC(Higher Order Component-컴포넌트 안에 컴포넌트 ...)를 사용함! 그랬더니, Wrapper Hell이 발생하여 코드추적이 어려워

gazero_

React에서 Component는? > 리액트에서 Component(컴포넌트)는 "앱을 이루는 최소한의 단위"라고 정의할 수 있다. (그러니깐, 리액트 앱은 '컴포넌트 + 컴포넌트 + 컴포넌트 + ... + 컴포넌트'의 형태! UI를 재사용 가능한 개별적인 여러조각으로 나눈 것이 컴포넌트) Component(컴포넌트)의 의미 👉사전적 의미: 요소, 부품, 부분 👉엔지니어링적 의미: 전체시스템을 구성하는 하나의 부품 혹은 모듈 👉프론트엔드적 의미: UI를 구성하는 UI요소 Component(컴포넌트)의 특징 HTML을 반환하는 함수 ( 재사용하기 편한 UI 조각 ) 컴포넌트는 항상 대문자! (그러니까 컴포넌트로 사용될 파일은 대문자로 시작해야 함) self closing Tag 사용! ex. ** React에서 component가 맡은 일 데이터를 UI로 만들어주는 기능 라이프사이클 API를

ikolp34

클래스 / 함수형 컴포넌트란? 리액트는 클래스형 컴포넌트 또는 함수형 컴포넌트 두가지로 나누어서 컴포넌트를 작성할 수 있다. 이전까진 클래스형 컴포넌트의 상태값, 생명주기 기능을 할 수 없었지만 2019년 리액트 16.8 버전부터 훅이 추가됨으로써 함수형 컴포넌트에도 클래스형 컴포넌트의 기능을 할 수 있게 되었다. 현재 리액트 공식사이트에서 함수형 컴포넌트와 훅으로 작업하는 것을 간결하고 사용하기 편리하여 권장하고 있어 함수형 컴포넌트로 많이 쓰고있는 추세다. 그렇지만 클래스형 컴포넌트가 오래되었다보니 아직 클래스형 컴포넌트를 사용하는 곳이 있어 공부해야 할 필요성이 있어 알아보았다. 1. 클래스형 컴포넌트 기본 선언 방식 > 클래스형 컴포넌트는 자바스크립트의 함수와 비슷한 성질이 있다. 자바스크립트의 함수 선언 방식처럼 new "함수"() 해주면 실행된다. 자바스크립트의 new Date() 메소드처럼 그안에 객체의 형태로 데이터를 담고

-hsw9724

과거에는 class component가 더많은 기능을 제공하여 많이 사용 했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 hook을 지원해 주어 현재는 공식 문서에서 함수형 컴포넌트와 hook을 함께 사용할 것을 권장하고 있다. 오늘은 무엇이 더 좋다 혹은 어떻게 사용한다가 아닌 사용하면서 몰랐었던 부분에 대해서 정리 할 것이다. 렌더링 된 후 props 의 불변성 class component 와 Functional component 두가지 코드를 준비해 보았다. 같은 기능을 두가지 방법으로 표현한 코드입니다. 하지만 두 코드를 실행시키면 미묘한 차이를 발견할 수 있다. 한번 순서에 맞게 따라해보자. Follow 버튼을 누른다. 3초가 지나기전에 선택한 profile 이름을 변경한다. functional component 는 Follow 버튼을 누른 시점에 선택되어있는 userName을 알림창에 띄어준다.

fnvl2358

Class Component & Functional Component * Functional Component* 이 컴포넌트를 클래스형 컴포넌트로 작성해봅시다. 코드를 다 지우고 다음과 같이 입력해보세요. Class Component

badassong

클래스란? 클래스란 쉽게 말하면 물건을 만드는 설명서라고 할 수 있다. class 안에는 함수와 변수를 넣을 수 있는데, 예를 들어 붕어빵과 몬스터를 만들었다면 붕어빵과 몬스터는 객체 또는 인스턴스라고 부른다. > 요즘엔 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰고 있는 추세지만 아직까지 클래스를 사용하고 있는 기업들이 있기 때문에 숙지는 하고 있어야 한다! 클래스형 컴포넌트 예제 클래스에서 함수와 변수를 사용할 때는 function, let, const를 붙이지 않는다. 클래스에서는 공통 기능을 extends를 통해 상속해 줄 수 있다. class 컴포넌트에는 'return 대신 화면에 그림그려줘!' 라고 의미하는 render를

zoo0

Class Component class란 물건을 만드는 설명서이다. 이 class 안에 함수나 변수를 넣어줄 수 있고, new 클래스명()을 이용해서 새로운 객체를 만들어줄 수 있다. class component의 특징 Hook 없이 state와 lifecycle 구현이 가능하다. this로 클래스형 컴포넌트에서 선언한 메서드를 참조할 수 있다. useEffect useEffect는 lifecycle을 대체해줄 수 있다. 이 useEffect 하나로 componentDidMount, componentDidUpdate, componentWillUnmount을 모두 포함할 수 있다. 차이점이 있는데 useEffect는 뒤에 배열을 집어넣어 조건을 달아줄 수 있다. 이것을 **의존성 배열(

namyeji

붕어빵이라는 이름을 class에 주고 안에 만드는 방법을 넣는다. new 붕어빵() 하면 붕어빵을 만들수 있다. 붕어빵 설명서는 하나지만 여러개의 붕어빵을 만들 수 있다. 몬스터 클래스를 만들고 기능,변수 등을 적용하는게 가능하다. 이는 설명서이다. 체력=100, attack(){} 등의 기능이 들어간 그럼 new 몬스터() 로 몬스터를 대량으로 만들 수 있다. 개발자의 입장에서는 컴포넌트를 만들 수 있는 설계도, 설명서라고 보면 된다. class 컴포넌트 { // 만드는 방법 title = "" onCahangeTitle(){ dafd } onClickSubmit(){} } new 컴포넌트() 사용해 본 클래스 컴포넌트 class

yeeunk90

Class? > 객체이자 물건 만드는 설명서 class안에는 함수와 변수를 넣을 수 있고, new를 통해 생성할 수 있다. 클래스에서 함수와 변수를 사용할 때는 를 붙이지 않는다. 클래스에서 만들어진 함수를 메소드라고 한다. getFullYear, getMonth, getDate 모두 메소드라고하고, 메소드 앞에는 function을 붙이지 않는다! ![](https://velog.velcdn.com/images/yeeunk90/post/2c63fff2-9f18-42d6-aeed-e9f555ad

diclfn42

맨 처음 리액트를 공부했을 때 컴포넌트를 선언하는 방법으로 "Class Component" 방식을 공부했었다.. 진짜... 진짜로 어렵다고 생각을 헸다. 뭐가 그렇게 적을게 많은지... 그리고 그 다음번 리액트 강의에서는 함수형 컴포넌트 선언 방식이란 걸 배웠는데 왜 이걸 냅두고 Class 컴포넌트를 썼던걸까? 라고 생각을 많이 했었다. 지금와서 생각해보면 Class컴포넌트 방식은 오래전부터 리액트를 사용하던 회사들은 다 사용하고 있기 때문에 유지보수 측면에서 보면 꼭 배우긴 해야 된다고 생각을 하고 있다. 먼저 컴포넌트의 기능을 잠깐 살펴보면 "컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수 있다. 컴포넌트의 목적에 따라 프레젠테이션(presenter) 컴포넌트와, 컨테이너(container) 컴

tootb

Virtual DOM 실제 DOM의 사본 같은 개념. React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전/후를 비교 후 바뀐 부분을 적용한다 Real DOM DOM (Document Object Model) JavaScript 같은 스크립팅 언어가 `, , `와 같은 태그들에 접근하고 조작할 수 있도록 브라우저가 태그들을 트리 구조로 객체화 시킨 것 브라우저가 트리구조로 만든 객체 모델 DOM 조작속도가 느려지는 이유 트리는 "데이터 저장" 자체의 의미보다 저장된 데이터를 더 효과적으로 탐색하기 위한 용도로 사용됨 => 빠른 자료 탐색 성능이 장점! DOM의 변경과 업데이트로 인한 브라우저의

rlatjsdn147

클래스형이나 함수혀이나 컴포넌트의 역할은 동일하지만, 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내애서 구현하기 때문에 함수형 컴포넌트에 비해 복잡한UI를 갖고있다. 반면에 함수형 컴포넌트는 단순히 props로 데이터를 받아서 UI에 뿌려주는 형태를 띄고 있다. 훅(Hook) 들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트+Hook을 주로 사용한다고 한다. 이제 차이점을 알아보자 1) 선언방식 > * class라는 키워드 필요 Component로 상속을 받아야한다 render() 메소드를 반드시 필요로 한다. 함수형 컴포넌트보다 메모리사용량이 많다. ![](https://velog.velcdn.com/

mh-yeo

by brgfx - kr.freepik.com Lifecycle? >In general, we might define a lifecycle as birth, growth & death. And our React components follow this cycle as well: they’re created (mounted on the DOM), they experience growth (by updating) and they die (unmounted from the DOM). This is the component lifecycle! by Timothy Robards <https://itnext.io/react-under

mh-yeo

by Martin Novak Class Component >Before React 16.8, Class components were the only way to track state and lifecycle on a React component. Function components were considered "state-less". 리액트 16.8 버전 이전까지는 state와 lifecycle method를 활용하려면 Class형 컴포넌트를 이용했어햐 했다. 하지만 Hook의 등장으로 함수형 컴포넌트에서도 state와 lifecycle method를 사용할 수 있게 되었으며, 함수형 컴포넌트로 웹빌딩을 하게되면서 더욱 간결한 코드작성이 가능해지고 재사용성이 높아졌다. 현재는 functional component를 사용하여 reac