봉보로봉봉

// class // Lotto.jsx import React, { Component } from 'react'; import Ball from './Ball'; function getWinNumbers() { console.log('getWinNumbers'); const candidate = Array(45).fill().map((v, i) => i + 1); const shuffle = []; while (candidate.length > 0) { shuffle.push(candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]); } const bonusNumber = shuffle[shuffle.length - 1]; const w..

// class import React, { Component } from 'react'; const rspCoords = { 바위: '0', 가위: '-142px', 보: '-284px', } const scores = { 바위: 0, 가위: 1, 보: -1, } const computerChoice = (imgCoord) => { return Object.entries(rspCoords).find(function (v) { return v[1] === imgCoord; })[0]; }; class RSP extends Component { state = { result: '', imgCoord: '0', score: 0, } interval; componentDidMount() { // 컴포넌트가 첫..

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; * 임포트와 익스포트 디폴트 잊지말기 근데 위와 같은..