리액트 (14) 썸네일형 리스트형 useEffect https://velog.io/@roum02/useEffect useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다. velog.io Hooks https://velog.io/@roum02/Hooks Hooks Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 velog.io 라이프사이클 메서드 https://velog.io/@roum02/%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EB%A9%94%EC%84%9C%EB%93%9C 라이프사이클 메서드 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 라이프사이클 메서드는 클래스형 컴포넌트에서만 가능하다.(함수형 컴포넌트에는 Hooks 기능 velog.io map(2) map함수를 응용하여 동적 배열 렌더링을 구현해보자. https://velog.io/@roum02/map2 map(2) 흐름은 다음과 같다.1) 초기 상태 설정2) 데이터 추가 기능 구현3) 데이터 제거 기능 구현3가지 useState 설정(1)데이터 배열(2)텍스트를 입력할 수 있는 input의 상태(3)데이터 배열에서 새로운 항목을 velog.io map 함수란? https://velog.io/@roum02/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%B0%98%EB%B3%B5 map 개발을 하면 반복 코드가 생기곤 한다. 이와 같은 코드는 관리의 측면에서 비효율적이며 낭비이다. 효율적으로 관리할 수 있는 방법을 알아보자. 자바스크립트 배열 객체의 내장 함수인 map함수 velog.io [이벤트 핸들링] input 여러개 다루기 https://velog.io/@roum02/input-%EC%97%AC%EB%9F%AC%EA%B0%9C-%EB%8B%A4%EB%A3%A8%EA%B8%B0 input 여러개 다루기 input값을 state에 넣을때, input이 여러개면 어떻게 할까? event 객체를 활용하면 된다. velog.io state를 이용한 이벤트 핸들링 https://velog.io/@roum02/state%EC%97%90-input%EA%B0%92-%EB%8B%B4%EA%B8%B0 state에 input값 담기 생성자 메서드인 constructor에서 state 초깃값을 설정하고,이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state를 업데이트해보자.그 뒤 input의 calue값을 state에 있는 값으로 설정한다. onC velog.io 이벤트 핸들링 사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는 것을 이벤트라고 한다. (HTML의 onchange등을 사용했다면 익숙할 것이다) 리액트의 이벤트 시스템도 HTML의 이벤트와 동일하다. 다만 몇 가지 주의사항이 있다. 이벤트를 사용할 때의 주의사항은 다음과 같다. 1. 이벤트 이름은 카멜 표기법으로 작성한다. (예: onclick을 onClick으로 작성하기) 2.이벤트에 실행할 자바스크립트의 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다. 3.DOM요소에만 이벤트를 설정할 수 있다. : div, button, input, form, span등의 DOM요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 예를 들어 이라는 컴포넌트에 onC.. Hooks Hook은 함수형 컴포넌트에서도 상태를 관리할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다. Counter.js파일을 생성해보자. import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(.. State state는 컴포넌트 내부에서 바뀔 수 있는 값을 의마한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿔주어야 한다. state는 클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트의 useState가 있다. 클래스형 컴포넌트의 state Counter.js파일을 src 디랙터리에 생성해보자. import React, { Component } from ‘react‘; class Counter extends Component { constructor(props) { super(props); // state의 초깃값 설정하기 this.state = { numb.. 이전 1 2 다음
