본문 바로가기

전체 글

 (35)
이벤트 핸들링 사용자가 웹 브라우저에서 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..

티스토리툴바