봉보로봉봉

// 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에 추가 됨 개..

React Hooks = 함수 컴포넌트에서도 state와 ref를 사용할 수 있게 하는 것 useState, useRef 이런 거 리액트에서는 React Hooks를 더 추천함 (useState, useRef 이런게 hooks임. const해서 컴포넌트를 만드는 건 함수 컴포넌트임!) 선언해주는 순서가 중요 이런식으로 컴포넌트를 만들 수 있음 구구단 구구단 이런식으로 코드가 조금 더 간결해짐 + setState를 해서 렌더링이 여러번 발생할 것 같지만 React가 알아서 처리해줘서 한번 밖에 일어나지 않음 성능 최적화를 위해 알아 둘 점! hooks는 state값이 변경되면 함수가 재실행됨 >그래서 class보다 조금 늦을 수도 있음 (class는 render()만 실행) 함수안에 메소드가 재생성되는건 ..

render() { return ( {this.state.first}곱하기{this.state.second}은? 입력 {this.state.result} ); } 리액트에서 항상 하나의 태그로 감싸져있어야하는데 그럼 쓸데없는 div태그가 하나 더 생기게 됨 이걸 없애고 싶으면 render() { return ( {this.state.first}곱하기{this.state.second}은? 입력 {this.state.result} ); } 이렇게 빈태그를 생성할 수 있음 하지만 현재 스크립트 태그로 붙여넣은 바벨에서는 지원을 안해서 다른 버전을 깔아야함 그래서 그럴 땐 이렇게 쓰면 됨 React.Fragment로 감싸기 render() { return ( {this.state.first}곱하기{this.st..

구구단 만들기 구구단 수동으로 바꿀 값들만 setState로 설정 구구단 위처럼 JSX와 Javascript를 섞어서 쓰면 안됨 아래처럼 따로 클래스의 메소드로 만들어서 써야함 구구단 구구단 컴포넌트를 여러개쓰면 각 컴포넌트마다 다른 state값을 가짐 > 문제를 다르게 풀 수 있음 +숙제 정답 옆에 답도 같이 출력하기 함수에 result를 저렇게 변경했다! onSubmit = (e) => { e.preventDefault(); if (parseInt(this.state.value) === this.state.first * this.state.second) { this.setState({ result: `정답 ! ${this.state.value}`, first: Math.ceil(Math.random(..