봉보로봉봉

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(..

크롬 확장프로그램 설치 ! 리액트 개발자 도구 그렇지만 이렇게 쓰면 엘리먼트 생성해주고... 또 렌더함수에 구구절절 써주고... 너무 불편하기 때문에 태그 형식을 취하게 됨 하지만 자바스크립트에서 html처럼 쓴다? 불가능 하기 때문에 이걸 가능하게 문법을 바꿔주는 babel을 사용 메소드나 객체는 다른걸 추가로 더 설치해야함 이걸 JSX라고 부름 Javascript + XML 그래서 닫는 태그를 꼭 해줘야함