봉보로봉봉

componentDidMount() { // 컴포넌트가 첫 렌더링 후, 여기에 비동기 요청을 많이 함 } componentDidUpdate() { // 리렌더링 후 } componentWillUnmount() { // 컴포넌트가 제거되기 직전, 비동기 요청 정리를 많이 함 } componentDidMount 렌더가 처음 성공적으로 실행되었다면 실행됨 > 리렌더링이 일어날 때는 실행되지 않음 componentWillUnmount 컴포넌트가 제거되기 직전 실행됨 componentDidMount에서 했던 작업을 제거하는 용도 부모 컴포넌트가 자식 컴포넌트(본인)를 없앴을 때 setInterval같은 함수를 없애주지 않으면 계속 돌아가기 때문에 없앨 때 *보통 둘이 짝임 componentDidUpdate 리렌더..

구조분해 문법으로 적어줘야 깔끔해짐 render의 return안에서는 for과 if를 쓸 수 없음 JSX에서는 쓸 수 없음! 그래서 리액트 조건문은 삼항연산자로 많이 씀! renderAverage = () => { const { result } = this.state; return result.length === 0 ? null : 평균 시간: {result.reduce((a, c) => a + c) / result.length}ms // 한번도 시도를 안했으면 태그가 없고: // 시도를 한 순간부터 평균시간을 보여줌 }; JSX에서는 null, undefined은 태그가 없는 것으로 인식됨 // 삼항연산자 사용 const renderAverage = () => { return result.length ..

render() 안에는 절대 setState를 넣지 않는다! 무한 반복 됨 자식은 props를 바꾸지 않아야하지만 어쩔수없이 부모로부터 받은 props를 바꿔야 할 때는 props를 state로 넣어서 바꾼다 그래야 부모에게 영향이 가지 않음 > 자식이 props를 바꾸면 부모도 뜻하지 않게 바뀔 수 있음 // hooks import React, { memo, useState } from 'react'; const Try = memo( ({ tryInfo }) => { const [result, setResult] = useState(tryInfo.result); const onClick = () => { setResult('1'); }; return ( {tryInfo.try} {result} ) })..

// class 일 때 state가 바뀌지 않아도 setState를 호출하면 계속 render가 실행 됨 확인 방법은 개발자도구에서 설정버튼 누르고 Highlight updates when components render. 체크 + 불이 들어온다고 항상 렌더가 되고 있는 것은 아님 콘솔을 찍어보는 것이 정확 그래서 shouldComponentUpdate를 써줌 값이 바뀌었을 때만 렌더가 실행되도록 import React, { Component } from 'react'; class RenderTest extends Component { state = { counter: 0 } shouldComponentUpdate(nextProps, nextState, nextContent){ if (this.state..

배열에 새로운 값을 넣을때 push를 사용하는데 리액트에서는 사용하면 안됨! 기존 배열이 바뀌어버리면 바뀐 값을 리액트가 감지할 수 가 없음 > false값이 나와야 렌더함수가 실행될 수 있는데 원본이 바뀌어버리면 렌더함수를 실행할 수가 없음 그래서 기존 배열을 복제해서 사용해야함 const arr = []; const arr2 = [...arr, 1]; // arr2 = [1] arr === arr2 > false 숫자야구 class // NumberBaseball.jsx import React, { Component } from 'react'; import Try from './Try-class'; function getNumbers() { // 숫자 4개를 겹치지 않게 랜덤하게 뽑는 함수 const..

코드가 너무 길어지면 컴포넌트로 빼주는게 좋다 컴포넌트로 분리하는 이유 > 재사용성을 위해서 > 가독성을 위해서 기존 코드에서 render() { return ( {this.state.result} 입력! 시도: {this.state.trys.length} {this.fruits.map( (v, i) => { return () })} ); } * 따로 뺀 컴포넌트 임포트 잊지 말기 컴포넌트로 분리 // Try.jsx import React, { Component } from 'react'; class Try extends Component { render() { return ( {v.fruit} - {i} ) } } export default Try; * 임포트와 익스포트 디폴트 잊지말기 근데 위와 같은..

리액트 반복문 map {['사과','바나나','귤'].map( (v)=> { return ( {v} ); })} 이렇게 반복문을 돌리면 배열의 값들이 들어간채로 목록이 생성됨 그렇다면 값이 두개인 것은? 이렇게 2차원 배열로도 가능하고 {[['사과', '맛없다'],['바나나', '맛없다'],['귤', '맛있다']].map( (v)=> { return ( {v[0]} - {v[1]} ); })} 객체로도 가능 {[{fruit:'사과', taste:'맛없다'},{fruit:'바나나', taste:'맛없다'},{fruit:'귤', taste:'맛있다'}].map( (v)=> { return ( {v.fruit} - {v.taste} ); })} 이름이 있으니 객체가 더 나을듯... 화살표 함수 return 생..

웹팩 여러 개의 자바스크립트 파일을 하나의 자바스크립트 파일로 합할 수 있도록 하는 것! 쓸데 없는 코드도 없앨 수 있고, 바벨도 사용할 수 있음 html에서 scrpit src로 불러올 수 있는 파일은 하나 뿐인데 js파일이 여러개일때 웹팩을 써서 하나로 합쳐주는 것! package.json 생성 여기에 리액트 개발에 필요한 모든 패키지를 넣을 것임 노드와 npm을 설치가 되어있어야함! 터미널에서 설치하려고 하는 폴더 위치로 들어가서 npm init package name 아무거나 나머지는 넘기고 author는 자기 이름 license ISC 나 MIT 적당히 적용 마지막에 yes 그럼 생성 됨! 리액트와 리액트 돔 설치 npm i react react-dom 그럼 package.json에 추가 됨 개..