[SeSAC] React 학습 정리(4) - LifeCycle(2) 함수형 컴포넌트에서 발생하는 에러처리 - 에러 바운더리 1. 함수형 컴포넌트에서 발생하는 에러처리 방법 🍞 함수형 컴포넌트에서 클래스형 컴포넌트의 에러처리 메서드 또는 에러바운더리를 대체하는 Hook은 현재는 없다. - 에러처리 메서드를 사용 하는 클래스형 컴포넌트(에러바운더리)의 자식 컴포넌트에 위치 시킨다. - js 내에서 try-catch 사용한다. 2. 에러 바운더리 : 자식 컴포넌트 트리 내의 자바스크립트 오류를 감지하고, 해당 오류를 기록하며, 충돌이 발생한 컴포넌트 트리를 대신하여 대체 UI를 표시하는 React 컴포넌트 ✓ 에러 바운더리는 클래스형 컴포넌트여야 한다. (현재는 함수형 컴포넌트로 에러바운더리를 만드는것은 지원되지 않는다.) ✓ 에러 바운더리 내에 getDerivedStateF.. 2023. 10. 14. [SeSAC] React 학습 정리(4) - LifeCycle LifeCycle React LifeCycle(생명 주기) 란 1. 생명 주기(LifeCycle)는 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 되는 과정 이다. 2. 컴포넌트의 생명주기를 관리하고 컨트롤하는 방법을 나타내는 개념 >>컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생 1. 클래스형 컴포넌트 LifeCycle 모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정 즉, 컴포넌트 생성시 -> 생명주기 메서드 컴포넌트 업데이트시 -> 생명주기 메서드 컴포넌트 제거시 -> 생명주기 메서드 다시말해 생명주기 메서드를 활용해서 LifeCycle에 따라 특정 코드를 실행 시킬 수 있다. 1-1. 생명.. 2023. 10. 12. [SeSAC] React 학습 정리(3) / 이벤트-함수형 컴포넌트 1. 함수형 컴포넌트에서 상태관리(이벤트 핸들링에 앞서) 2. 함수형 컴포넌트에서 이벤트 핸들링 3. 함수형 컴포넌트에서 이벤트 핸들러에게 인자를 전달하기(쉬움) 1. 함수형 컴포넌트에서 상태관리(이벤트 핸들링에 앞서) 함수형 컴포넌트는 함수 자체이다. (클래스형 컴포넌트와는 태생이 다름) 예를 들어 함수 자체인 함수형 컴포넌트 내부의 함수1, 함수2, 함수3 이 있다면, 컴포넌트 내부의 함수1~3 의 정보를 찾고 사용하기 위한(상태를 관리하기위한) 방법은 무엇인가?? 클래스나 객체의 경우에는 클래스/객체 내부의 메서드(함수)1, 메서드(함수)2, 메서드(함수)3 -> 메서드(함수)1을 찾고 사용하기위해(상태를 관리하기 위해) this를 사용한다. >> 메서드(함수)1의 this가 클래스/객체 자체를 가.. 2023. 9. 29. [SeSAC] React 학습 정리(3) / 이벤트-클래스형 컴포넌트 1. 함수를 선언해서 바로 onClick으로 전달 (일반, 화살표) 2. 메서드로 바꿔서 onClick에 전달 3. Bind를 써서 일반함수를 원하는대로 사용 4. 일반and화살표 이벤트 핸들러에게 인자를 전달하는 두가지 방법 React 클래스형 컴포넌트 이벤트 핸들링 (이벤트 핸들러의 this, bind, 화살표함수, 인자 전달) 1. 함수를 선언해서 바로 onClick으로 전달 (일반, 화살표) * JavaScript에서 함수가 일반 함수로 호출될 때, 함수 내부에서의 this는 호출한 곳에 따라 달라짐. * JavaScript에서 함수가 화살표 함수로 호출될 때, 함수 내부에서의 this는 정의된 곳의 바로 외부 범위임. import { Component } from 'react'; class Wh.. 2023. 9. 28. [SeSAC] React 학습 정리(3) / 이벤트-합성이벤트 1. Event 기입 - 이벤트는 소문자가 아닌 카멜 케이스(camelCase)를 사용 (ex. onclick ➡ onClick) - JSX를사용해 이벤트 핸들러 전달시 () 사용 X 2. Synthetic Event ( 합성 이벤트 [객체] ) 일부 브라우저 간에 엔진 및 버전의 차이로인해 이벤트 객체의 구조와 속성이 다를 수 있다. 리액트는 이러한 브라우저간의 차이점을 통합해서 사용하고자 이벤트 객체를 감싼 합성 이벤트 객체 개념을 사용한다. (브라우저 마다 코드를 다르게 써야하면 곤란하니까) 이때 브라우저의 이벤트 객체를 '네이티브 이벤트 객체' 라 하며 이것을 감싼 객체를 '합성 이벤트 객체' 라 한다. 즉, 합성 이벤트 객체는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼.. 2023. 9. 28. [SeSAC] React 학습 정리(2) / state state : - 특정 컴포넌트가 가지고 있는 상태값 - state 변경시 재 랜더링이 자동으로 수행됨 클래스형 / 함수형 컴포넌트 에서 state 사용 문법이 다름. 클래스형 컴포넌트에서 state - state의 이름과 초기값을 생성자 혹은 필드에서 설정해 주고, - render() 함수에서 this.setState 함수를 통해 state를 변경해 줄 수 있음. // 클래스형 컴포넌트 import React, { Component } from 'react'; class Counter extends Component { // 생성자를 사용한 state 설정 방법 // React 버전 16.3.0 이전에 사용되던 방법 constructor(props) { super(props); this.state = .. 2023. 9. 27. 이전 1 2 3 4 다음
