# Class Component
[개발자되기: React 심화] Day-51
실제 DOM의 사본 같은 개념. React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전/후를 비교 후 바뀐 부분을 적용한다DOM (Document Object Model)JavaScript 같은 스크립팅 언어가 <html
Class형 컴포넌트, 함수형 컴포넌트
클래스형이나 함수혀이나 컴포넌트의 역할은 동일하지만,클래스형 컴포넌트는 로직과 상태를 컴포넌트 내애서 구현하기 때문에 함수형 컴포넌트에 비해 복잡한UI를 갖고있다. 반면에 함수형 컴포넌트는 단순히 props로 데이터를 받아서 UI에 뿌려주는 형태를 띄고 있다.훅(Hoo
[React] State 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
[React] Class or Functional component
by Class Component >Before React 16.8, Class components were the only way to track state and lifecycle on a React component. Function components were
Class / Functional Component
클래스형 함수는 ES6 문법을 모두 사용할 수 있다.componentDidMount, componentDidUpdate, componentWillMount 등의 lifecycle 메소드를 사용할 수 있다.클래스 컴포넌트는 React.Component를 extend 할
Class / Functional Component
React 컴포넌트를 만들 때 클래스형 컴포넌트, 함수형 컴포넌트 두 가지 방식이 있다. 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해줘서 현재는 공식 문서에서도 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. > 함수형 컴포넌트를 선호하는 이유 클래스형 컴포넌트는 로직과 ...
DAY 16) 1. 클래스컴포넌트?? 근데, 클래스는 또 뭐야?? => Class-Component 2. This ?! 뭔데 이게 자꾸 말썽인거야! => this 3. 컴포넌트가 살아 숨쉬나? 생명주기가 있대! => Component-Lifecycle
백엔드를 만들어 본다.fireBase를 이용하면 백엔드 개발자 없이 프로젝트 만들 수 있다.hasMore가 true일 때 마우스 스크롤이 내려갈 때 loadMore이 실행된다.마우스를 내리면 (1~20) (21~30) 까지의 데이터를 불러와 10개씩 계속 추가 된다.데
16) 넷째주 월요일
Algorithm Self Study, Class Component, useEffect, Code Review, Daily Scrum, Algorithm Class, self Study
this, binding
자바스크립트의 this함수는 다른 언어의 this키워드와는 약간 다르게 작동한다.또한 strict mode와 non-strict mode에도 약간의 차이가 있다.대부분의 경우 this의 값은 함수의 호출 방식에 따라 결정된다.때문에 실행중에 this를 할당할 수 없고
Class / Functional Component
클래스에서는 공통 기능을 extends를 통해 상속해줄 수 있다.this는 어디서 실행하냐에 따라서 변화하는 이슈가 있다. 즉, 실행하는 주체에 따라서 this가 다르게 나온다.이렇게 바뀌는 this를 동적 this라고 한다.따라서 onClickCouter 를 클릭시
State Lifecycle
컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다.이는 특정 시점에 코드가 실행되도록 설정할 수 있다는 것을 의미한다.이 순서에 대해 간략히 요약한다면그리기 : render그리고 난 뒤 : componentDidMo
Class Component vs Functional Component
class안에는 함수와 변수를 넣을 수 있다.이 변수와 함수를 조합해 붕어빵과 몬스터를 만드는 방법을 적어둘 수 있다.그리고 붕어빵과 몬스터를 만들고 싶다면 new 붕어빵()으로 만들어 준다.이렇게 만들어진 붕어빵과 몬스터는 객체 또는 인스턴스라고 부른다.그림의 new
State Lifecycle
클래스 컴포넌트(class component)에서는 원하는 시점에 코드가 실행되고 종료되도록 설정을 할 수 있다.필요없는 코드가 종료되지 않고 계속 사용된다면 그만큼 리소스가 낭비되기 때문에 시작과 종료시점을 설정하는 것은 중요하다.랜더가 되고나면 먼저 마운트(comp
16) React의 전적들... 실무가고싶으면 class형태의 component도 알아야 해 ! useEffect와 axios까지! 실무중심주의 코드캠프의 커리큘럼 체고야!!!! (Code Camp FE 6기)
오늘의 굿모닝 알고리즘 ~ 클래스 컴포넌트useEffectuseEffect에서 axios 사용
Class Components vs Functional Component
React에는 클래스형 component와 함수형 component, 2가지 component가 존재한다.기본적인 React foundation 이기도 하고, 상황에 따라 class component 와 funtioncal component를 적절히 쓸 수 있도록 ..
Class Component vs Functional Component
컴포넌트란?독립적인 기능을 수행하는 최소한의 단위 모듈이다.데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수컴포넌트는 항상 대문자로 시작해야한다.컴포넌트의 종류에는 크게 함수형 컴포넌트와 클래스형 컴포넌트 2가지가 있다.
Introducing React Hooks
React 16.8부터 도입된 hooks는 state를 비롯한 여러 리액트의 특징을 class없이 사용할 수 있도록 도와줍니다. 이번 시간에는 리액트팀이 왜 hools를 도입했고 어떤 도움을 주는지 살펴보겠습니다.hooks를 시작하기 전, 먼저 살펴볼 특징을 알아보겠습
Error Boundaries
과거에는, 컴포넌트 내부에서 발생한 자바스크립트 에러가 리액트의 internal 상태를 오염시키고 다음 렌더링에서 암호화된 에러를 방출 (emit cryptic error)했습니다. 이런 에러는 언제나 application code이전 단계의 문제로 발생했지만, 리액트
🐚 TIL 0203
[Class Component] [Class Life-Cycle] [http vs. Websocket] [Class to Functional]