# Functional Component

20개의 포스트

Class / Functional Component

클래스에서는 공통 기능을 extends를 통해 상속해줄 수 있다.this는 어디서 실행하냐에 따라서 변화하는 이슈가 있다. 즉, 실행하는 주체에 따라서 this가 다르게 나온다.이렇게 바뀌는 this를 동적 this라고 한다.따라서 onClickCouter 를 클릭시

2022년 4월 9일
·
0개의 댓글

Class Components vs Functional Component

React에는 클래스형 component와 함수형 component, 2가지 component가 존재한다.기본적인 React foundation 이기도 하고, 상황에 따라 class component 와 funtioncal component를 적절히 쓸 수 있도록 ..

2022년 4월 3일
·
0개의 댓글

class/functionnal component

Class component

2022년 3월 30일
·
0개의 댓글
post-thumbnail

Class Component vs Functional Component

컴포넌트란?독립적인 기능을 수행하는 최소한의 단위 모듈이다.데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수컴포넌트는 항상 대문자로 시작해야한다.컴포넌트의 종류에는 크게 함수형 컴포넌트와 클래스형 컴포넌트 2가지가 있다.

2022년 3월 28일
·
0개의 댓글

Hooks at a Glance

Hooks는 하위 호환성을 갖고 있습니다. 이번 포스팅에선 우리가 배워볼 hooks의 전반적인 개요를 살펴보겠습니다. 다음 포스팅부터 각각에 대해 자세히 알아볼 것입니다. State Hook 아래 예시는 counter를 렌더링합니다. 버튼을 클릭하면 값을 올려주죠.

2022년 3월 27일
·
0개의 댓글

Introducing React Hooks

React 16.8부터 도입된 hooks는 state를 비롯한 여러 리액트의 특징을 class없이 사용할 수 있도록 도와줍니다. 이번 시간에는 리액트팀이 왜 hools를 도입했고 어떤 도움을 주는지 살펴보겠습니다.hooks를 시작하기 전, 먼저 살펴볼 특징을 알아보겠습

2022년 3월 23일
·
0개의 댓글
post-thumbnail

[React #10] React Hooks로 함수형, state 효율적으로 쓰기(feat.useState())

Hooks 개발 배경 React의 Class형 컴포넌트로 모든 프로그래밍을 하던 시절, 개발자들은 React팀에 다음과 같은 feedback을 던진다. "Class형은 컴포넌트 간 재사용하기 어려워요!" "Class형은 복잡하고 테스트하는데 시간을 많이 잡아먹어요!"

2022년 1월 3일
·
0개의 댓글

🌊 211003 WIL

리액트 심화반 수강이 쉽지 않다. 용어도 어렵지만 기본적인 이해도 많이 부족한 상태라 단순히 코드만 따라 치는 수준이다. 많이 부족하다고는 생각하고 있었지만 더 노력해야할 필요를 느끼게 되는 시점이다. 팀원 분들도 비슷한 어려움을 겪고 계셨는데, 공부에 도움이 되는 사

2021년 10월 3일
·
0개의 댓글

Hook(1): useState

기존의 react에서는 functional component에서 state를 사용할 수 없었다. 하지만 v16.8 이후부터 useState라는 함수를 사용하여 functional component에서도 state의 사용이 가능하게 되었다.useState를 호출하면 배열

2021년 9월 12일
·
0개의 댓글
post-thumbnail

Class Component vs Functional Component

오늘은 Class Component 와 Functional Component 에 대해서 비교한다.🔥 Class Component class component는 state를 이용해서 상태를 나타낸다. component lifecycle 에 정의된 메서드를 이용해서 순

2021년 8월 26일
·
0개의 댓글
post-thumbnail

TIL_69_Hook

생활코딩훅에서 clean up의 역할을 하는 것은?클래스 방식에서는 스테이트가 바뀔 때마다 이전의 props 와 이전의 state 값을 전달하여 두 개의 값이 다를 때만 작업을 처리하도록 했었다.아래의 코드처럼.스테이트가 바뀔 때마다 인자로 이전의 프롭스 값과 이전의

2021년 4월 20일
·
0개의 댓글
post-thumbnail

TIL_68_Hook

클래스 방식은 라이프사이클에 따라서 정해진 메소드에 따라 원하는 타이밍에 원하는 어떤 코드를 호출할 수 있다.어떻게 하면 랜더와 관련된 작업을 하는 FuncComp라는 함수가 실행된 후에 추가적으로 필요한 작업을 처리하게 할 수 있을까?\-> 그것이 바로 리엑트의 유즈

2021년 4월 19일
·
0개의 댓글
post-thumbnail

TIL_64_Hook

생활코딩 Hook함수형 컴퍼넌트함수 스타일 코딩으로 할 수 없는 대표적인 작업이컴퍼넌트 내부의 스테이트를 만들어 사용하는 것.또한 컴퍼넌트의 생성 변경 소멸에 대한 이벤트인 라이프 사이클 api를 사용할 수도 없었음.그래서 함수 방식은 상위 컴퍼넌트가 시키는 일만 처리

2021년 4월 15일
·
0개의 댓글
post-thumbnail

TIL_56_Hook

함수형 컴퍼넌트Hook은 클래스 안에서는 동작하지 않는다.왜 사용?컴퍼넌트 사이에서 상태와 관련된 로직을 재사용하기가 어렵다. (HOC, render props)개발을 하다보면 가끔 상태 관련 로직을 컴퍼넌트 간에 재사용하고 싶은 경우가 생긴다. HOC (higher-

2021년 3월 31일
·
0개의 댓글
post-thumbnail

TIL | React 함수형 컴포넌트

함수형 컴포넌트는 위코드 부트캠프 과정중 2차프로젝트 진행하다가 처음 만났던녀석입니다. 그 당시 클래스형 컴포넌트로 프로젝트를 진행하며 프로젝트 결과물을 만들어내기 급급했던 나로써는 새로 배운개념을 적용할 여유가 없었습니다.그러한 이유를 핑계삼아 뒤늦게 함수형 컴포넌트

2021년 2월 22일
·
0개의 댓글
post-thumbnail

[TIL]React의 핵심 개념 - props, state, life cycle, functional component VS class component

React의 핵심 개념인 props, state, life cycle 그리고 functional component와 class component에 대해 공부합니다.

2020년 9월 21일
·
0개의 댓글
post-thumbnail

커스텀훅(Custom Hook)

스크롤이벤트를 위한 커스텀훅 사용기

2020년 9월 13일
·
0개의 댓글
post-thumbnail

TIL - React Native, Functional Component

React Native에서 함수형 컴포넌트 사용하기

2020년 9월 1일
·
0개의 댓글