Dev/프론트엔드
-
React :: 8. HooksDev/프론트엔드 2021. 7. 16. 10:44
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. Hooks는 리액트 v16.8부터 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 해 주었다. Hooks 배우기 리액트 내장 Hooks 사용하기 - 커스텀 Hooks 만들기 8.1 useState Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {val..
-
React :: 컴포넌트의 라이프 사이클 메서드Dev/프론트엔드 2021. 7. 14. 13:41
7.1. 라이프 사이클 메서드의 이해 라이프 사이클 메서드의 종류는 총 아홉가지. Will 접두사가 붙은 메서드는 작업을 하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 메서드들은 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용 가능. 라이프 사이클을 총 세가지가 있다. 1. 마운트 2. 업데이트 3. 언마운트 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. 마운트 할 때 호출하는 메서드 컴포넌트 만들기 - constructor - getDerivedStateFromProps - render - componentDidMount constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 g..
-
ReactDev/프론트엔드 2021. 7. 14. 13:40
컴포넌트 : 클래스 컴포넌트, 함수형 컴포넌트가 있다. 클래스 컴포넌트와 함수형 컴포넌트는 Props를 사용하는 방법은 비슷하지만 State 사용에 차이가 있음 클래스 컴포넌트 : 생성자에 state초기값 세팅 후 this.setState() 함수 호출하여 사용 함수형 컴포넌트 : 배열 비구조화 할당 문법을 사용하여 useState() 함수 호출하여 사용 JSX 문법에서 이벤트 바인딩은 자바스크립트 코드가아닌 객체를 전달해야함. ref란 ref란 특정 DOM에 작업을 해야할 때 사용한다. ID를 사용하지 않는 이유는 컴포넌트를 여러번 사용하였을 경우 ID의 Unique 에 위배되기 때문이다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에만 작동을 하기 때문에 이러한 문제가 생기지 않는다. ref를 사..