모든 컴포넌트에는 라이프사이클이 존재 시작 : 페이지에 렌더링 되기전 준비과정 끝 : 페이지에서 사라질 때 컴포넌트를 처음 렌더링하거나 업데이트 할때, 특정 작업을 처리해야할 경우 라이프사이클 메서드 사용 라이프사이클 메서드 클래스형 컴포넌트에서만 사용 가능 함수형 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업 처리 종류 3가지 카테고리 (마운트, 업데이트, 언마운트) 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것 호출되는 메서드 constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps props에 있는 값을 state에 넣을 때 사용하는 메서드 render 준비한 UI를 렌더링 componentDidMount 컴포넌트가 ..

자바스크립트 배열 객체의 내장함수인 map 함수 반복되는 컴포넌트를 렌더링할 수 있다 파라미터로 전달된 함수를 사용해, 배열 내 각 요소를 규칙에 따라 변환 결과로 새로운 배열 생성 문법 arr.map(callback,[thisArg]) 파라미터 callback 새로운 배열의 요소를 생성하는 함수, 파라미터는 세가지 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 var numbers=[1,2,3,4,5]; var processed = numbers.map(function(num){ return num*num; }); ..

일반 HTML 태그에서의 id와 비슷 id 특정 DOM 요소에 id를 달면, css나 자바스크립트에서 해당 id를 찾아 작업 가능 ref 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법 사용 이유 JSX 안에서 DOM에 id를 달면 렌더링 시 그대로 전달된다 같은 컴포넌트를 여러번 사용 시 중복id를 가진 DOM이 여러개 생긴다 ref는 전역적으로 작동하지 않고, 컴포넌트 내부에서만 작동하기 때문에 사용 클래스형 컴포넌트 : createRef : 리액트 내장함수 함수형 컴포넌트 : useRef() : 리액트 훅 클래스형 컴포넌트 콜백 함수를 통한 ref 설정 ref를 달 요소에 ref라는 콜백함수를 props로 전달 이 콜백함수는 ref값을 파라미터로 전달받는다 함수내부에서 파라미터로 받은 ref를 ..

이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것 웹 브라우저의 HTML 이벤트와 인터페이스가 동일 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값 전달 DOM 요소에만 이벤트를 설정할 수 있다 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다 리액트가 지원하는 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Wheel Media Image Animation Transition 이벤트핸들링 이벤트 연습 { console.log(e); }} /> 콘솔에 기록되는 e 객체는 SyntheticEvent 웹 브라우저의 네이티브 이벤트를 감싸는 객체 이벤트가 끝나면 초기화되므로 정보를 참조할 수..

변수나 함수를 다른 파일에 저장해두고 불러와 사용할 수 있다 A.js에서 데이터를 내보니 B.js에서 사용하기 //A.js var data = "test"; export default data; //B.js import data from './A,js'; export 파일마다 export default 키워드는 한번만 사용 가능 여러개의 변수를 내보내려면 export default 대신 export {data1, data2} import import 변수명 from '경로' export{}로 내보낸 변수를 사용하려면 import {data1, data2} from './A.js'; export했던 변수명을 그대로 써야한다 원하는 변수명만 써도 된다 //data...

props 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값 컴포넌트 자신은 해당 props를 읽기전용으로만 사용 가능 props의 값을 바꾸려면 부모컴포넌트에서 바꾸어야 한다 state 컴포넌트 내부에서 바뀔 수 있는 값 동적 데이터를 다룰 때 사용 종류 클래스형 컴포넌트의 state 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state 클래스형 컴포넌트의 state import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { number: 0 }; } render() { const { number } =..