Study

[JavaScript][clean-code] map vs forEach

* map vs forEach의 차이 map : 새로운 배열 만들기 forEach : 요소가 loop될때마다 함수를 실행시켜준다. const prices = ['1000', '2000', '3000']; // forEach는 함수를 실행시켜준다. const newPricesForEach = prices.forEach((price) => return price + '원'); // map은 새로운 배열을 만들어 낸다. const newPricesMap = prices.map((price) => return price + '원'); // result newPricesForEach // undefined newPricesMap // ['1000원', '2000원', '3000원']; forEach의 반환값은 u..

[React_study] 리액트 state변경(useState) & 이벤트 핸들러

* 리액트 state변경하는 방법 (useState) state는 state변경함수를 써서 state를 변경해야합니다. state변경함수를 이용하지 않으면 html 재렌더링이 안된다. state를 만들때 배열안에 2개까지 작명을 할 수 있다. 두번째 값을 state의 값 변경을 도와주는 함수이다. 해당 함수를 이용해서 state변경이 가능하다. (참고) 관습적으로 set- 이라는 접두사를 붙여서 네이밍을 한다. setState(새로운 state) 형태로 사용한다. * 예시로 보는 state변경 방법 function App(){ const [up, setUp] = useState(0); return ( { setUp(up + 1) } }>{ up } ) } * 이전 값을 바탕으로 현재 값을 설정 하는 방법..

[React_study] 중요한 변수를 담는 state

* state 사용 하는 방법 - 자바스크립트에서는 var, const, let를 이용해 변수를 선언 및 할당하였다. - 리액트에선 변수 말고 state를 만들어서 데이터를 저장할 수 있다. * state사용 예시 코드 import { useState } from 'react'; import './App.css' function App(){ let [blogTitle, setBlogTitle] = useState('Welcome Blog'); return ( {blogTitle} 글제목 2월 17일 발행 ) } useState를 import해준다. import {useState} from 'react' useState('저장할 값') const [title, setTitle] = useState('tes..

[JavaScript][clean-code] for문 배열 고차 함수로 리팩터링 & 배열 메서드 체이닝

* for문 배열 고차 함수로 리팩터링 - 변수 다루기 - 임시변수 줄이기 * 예시로 보기 아래의 패턴처럼 사용하는 부분이 많이 있을 것이다. 임시변수를 만들어주고 for문을 이용해 임시변수에 값을 넣어주는 패턴 이럴때는 배열 고차함수를 활용해서 배열문을 조금 더 선언적으로 명시적으로 변경할 수 있다. const price = ['2000', '1000', '3000', '5000', '4000']; function getWonPrice(priceList) { let temp = []; for (let i = 0; i < priceList.length; i++) { temp.push(priceList[i] + '원'); } return temp; } - 해당 함수는 배열을 조작하는 함수로써 목록을 받아서..

[React_study] 리액트에서 레이아웃 만들 때 쓰는 JSX 문법

* JSX 문법 - 리액트에서는 html 대신 JSX라는걸 사용한다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적은 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. * JSX 문법 1. html에 class를 넣을 때는 className 스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 원래 리액트환경에서 를 만들고 싶으면 자바스크립트로 React.createElement('div', null) 이러식으로 어렵게 코드를 짜야한다. 그래서 JSX라는 언어를 대신 사용한다. JSX는 html과 사용방식은 비슷하다. JSX는 일종의 자바스크립트여서 자바스크립트에서 사용하는 예약어..

[React_study] 리액트 React 설치 & 개발환경 셋팅

* 개발환경셋팅 Node.js LTS버전 설치 (13버전 이하 아니면 17버전은 사용 지양) Vscode * 리액트 프로젝트 생성 명령어 npx create-react-app src폴더안에 있는 App.js가 메인페이지이다. * 리액트 실행 (미리보기) Terminal창에 아래의 명령어 입력 localhost:3000으로 페이지가 열린다. 페이지가 자동으로 열린다. 열리지 않으면 크롬 브라우저에서 직접 열면된다. npm start * 프로젝트 파일들 설명 node_modules폴더 : 라이브러리 코드 보관함 public폴더 : static파일 모아 놓는 곳 src폴더 : 코드 짜는 곳 App.js : main page package.json : 프로젝트 정보 (프로젝트 이름, 라이브러리 이름 및 버전) ..