오봉이와 함께하는 개발 블로그

이벤트 처리 시 주의점 이벤트 이름은 카멜 표기법 사용 : onClick@@@, onKeyUp@@@, onChange@@@ 이벤트에 이벤트 핸들러 함수 형태의 값 전달 onClick = {onClickEnter} onClick = { () => setColor('green') } 이벤트는 DOM 요소에만 설정 가능 사용자가 만든 컴포넌트에는 이벤트 설정 불가 onClick을 props로 전달해서 컴포넌트 내부의 DOM 이벤트로 설정 가능 예 : MyComponent에 onClick 설정 시 했을 때 클릭 시 eventHandler() 함수를 실행하는 것이 아니라 이름이 onClick인 props를 MyComponent에 전달하는 것 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정..

함수형 컴포넌트에서 state 사용하기 React 버전 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었다. 이후 버전에서 useState()를 통해 state 사용 가능 이 과정에서 Hooks라는 것을 사용 Hooks 16.8 버전에서 새로 도입된 기능 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능 제공 useState() : 상태 관리 useEffect() : 렌더링 직후 작업 설정 배열의 비구조화 할당 배열의 요소 값을 쉽게 추출하기 위한 문법 기존 방법 const array = [1, 2]; const one = array[0]; const two = array[1]; 배열의 비구조화 할당 방법 const array = [1, 2]; const [one, two] =..

이미지 출력 방법 1 : import src 안에 images 폴더 생성 후 이미지 저장 이미지를 사용하는 컴포넌트에서 이미지 import import imgApple from '../images/apple.png'; 이미지 출력 방법 2 : public 내에 assets 폴더 만들고 그 안에 이미지 파일 저장 이 방법은 import가 되지 않는다. 이미지 출력 방법 3 : state를 활용한 변수로의 이미지 출력 state 변수에 이미지를 저장하고 출력한다. 방법 1 : import - Image.js import React, { Component } from 'react'; import imgApple from '../images/apple.png'; imp..

state 컴포넌트에서 내부에서 변경될 수 있는 값 이 값이 변경될 때마다 리 렌더링 됨 값을 변경할 때는 반드시 setState() 함수(메소드) 사용 setState() 함수 사용하지 않고 직접 변경하면 리 렌더링 하지 않음 state 선언 state = { number:0 } state 사용 { this.state.number } 반드시 this 붙임 setState() 함수 사용해서 변경 this.setState( { number: this.state.number + 1 } ); props와 state 비교 props : 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 값, 읽거 전용 state : 컴포넌트 자신이 갖고 있는 값, 변경 가능 state 예제 - Counter.js, App.js clas..

props 컴포넌트의 속성(값 설정) 부모 컴포넌트에서 자식 컴포넌트로 값 정달할 때 사용(읽기 전용) 컴포넌트 렌더링 할 때 값을 전달해 주고 싶을 때 사용 부모 컴포넌트 : App.js 자식 컴포넌트 : Subject.js {this.props.title}을 원하는 곳에 적으면 부모 컴포넌트 title에 있는 값이 출력 됨 class App extends Component { render() { return ( {/* 안녕하세요. */} {/* 위에 추가한 컴포넌트 사용 : 태그 형식으로 사용한다. */} {/* */} ) } } class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} world ..