봉보로봉봉

리액트 반복문 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(..

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

Node.js설치 터미널에서 npm -v 입력해서 설치 확인 npm install -g create-react-app 권한이 없으면 sudo npm install create-react-app 설치 에러 뜰 때 참고 : 유저 이름 부분에 내 유저 이름 사용하면 됨 https://stackoverflow.com/questions/55938030/error-eacces-permission-denied-mkdir-when-installing-sth-with-npm/55938343 Error: EACCES: permission denied, mkdir when installing sth with npm Everytime I try to install something with npm (in this case e..