componentDidMount() => 컴포넌트가 첫 렌더링된 후 실행 componentDidUpdate() => 리렌더링 시 실행 componentwillUnmount() => 컴포넌트가 제거되기 직전에 실행 클래스 라이프사이클 1. constructor 2. render 3. ref 4. componentDidMount *. (state/ props 변경) 5. shouldComponentUpdate 6. render 7. componentDidUpdate *. (component가 제거됬을 때) 8. componentWillUnmount 해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=..

class import React, { Component } from "react"; class ResponseCheck extends Component { state = { state: "waiting", message: "클릭해서 시작하세요!!", result: [], }; timeout; startTime; endTime; onClickScreen = () => { const { state, message, result } = this.state; if (state === "waiting") { this.setState({ state: "ready", message: "초록색이 되면 클릭하세요.", }); this.timeout = setTimeout(() => { this.setState({ st..

setTimeout은 일정 시간 후 코드를 비동기적으로 실행하는 함수입니다. setTimeout(() => { ...code }, n) 위와 같은 모양을 가지며, code부분에 실행할 code가 들어가며, n부분에 일정 시간이 들어갑니다. 예제) class timeout; func = () => { this.timeout = setTimeout(() => { this.setState({ state: "now", message: "클릭", result: [], }); this.startTime = new Date(); }, Math.floor(Math.random() * 1000) + 2000); } hooks const timeout = useRef(null); func = () => { timeout...

리액트에서 조건문을 사용할 때 주로 삼항 연산자를 사용해서 처리합니다. 삼항연산자란 x ? y : z 위의 모양을 가지며 x는 조건 y는 참일 때 실행되는 코드, z는 거짓일 때 실행되는 코드입니다. ex) 10 > 3 ? a = 10 : a = 5 결과값 : a === 10 renderAverage = () => { const { result } = this.state; return result.length === 0 ? null : ( 평균 시간: {result.reduce((a, c) => a + c) / result.length} ms ); }; render() { const { state, message } = this.state; return ( {message} {this.renderAver..

크롬 확장프로그램 React dev tools를 설치 chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 75726fadfd on 10/19/2020. chrome.google.com 개발자도구 - Components - 우측부분 톱니 버튼 - General - Highlight updates when components render 체크 렌더링 될 때 마다 렌더링 되는 부분을 표시해주며, 렌더링 양에 ..

렌더링은 state가 변경되었을 때 발생 class에서는 render부분이 재실행 hooks에서는 함수컴포넌트 전체가 재실행 배열에 값을 변경하는 경우 배열 자체가 변하지 않으므로 render가 발생하지 않음 arr1.push(1)과 같이하면 arr1===arr1 이므로 render가 일어나지 않음 arr2 = [...arr, 1]과 새로운 배열에 원래 배열 + 추가할 값을 넣어주어서 arr1!==arr2로 render를 발생 시킴 해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.

map함수를 통해 다음 코드를 반복실행합니다. x.map((v, i) => { return ; } y태그의 key값을 b[i]로 지정 ( key값은 중복되면 안됨 ) props1의 값을 v로 지정 ( v는 x[i] ) props2의 값을 i로 지정 ( i는 현재 반복 인덱스 ) (예제) map 함수 사용 render() { const { result, value, tries } = this.state; return ( {result} 시도: {tries.length} {tries.map((v, i) => { return ; })} ); } try.jsx import React, { memo } from "react"; const Try = memo(({ tryInfo }) => { return ( {tr..

웹팩이란? 여러개의 자바스크립트 파일을 하나로 합쳐서 하나의 파일로 만들어 주는 도구 웹팩 설치 *node가 설치되어 있어야함. 작업을 할 폴더에서 npm init 실행 npm init react, react-dom 설치 npm i react react-dom webpack, webpack-cli 설치 npm i -D webpack webpack-cli plugin 설치 npm i -D @babel/plugin-proposal-class-properties npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D babel 설치 (package.json에서 확인 가능) babel/core - babel의 기본적인 것들, 최신문법을 옛날문법으로 변경 bab..