전체 글

[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 : 프로젝트 정보 (프로젝트 이름, 라이브러리 이름 및 버전) ..

[React_study] React를 사용하는 이유는??

* React를 사용하는 이유 - 리액트의 정확한 용도를 알아야 리액트라는 라이브러를 이해할 수 있다. Naver Vibe, Flipkart, Instagram 이런 웹사이트 들어가면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 이런 사이트들을 SPA (Single Page Application) 이라고 한다. html 파일을 하나만 사용한다. 다른 페이지를 보여주고 싶을 때 html 부분만 렌더링한다. 따라서 부드럽게 동작한다. vanilla JavaScript으로도 만들 수는 있지만 코드가 너무 길어지는 관계로 리액트라는 자바스크립트 라이브러를 설치해서 더 쉽게 만들 수 있다. * 리액트 쓰는 또 다른 이유 html을 함수, array, object에 보관하고 재사용할 수 있어서 큰 프로젝..

[JavaScript][clean-code] 불변성 (immutable)

* 불변성 (immutable) * 예시로 보는 불변성 const originArray = ['123', '456', '789']; const newArray = originArray; originArray.push(10); originArray.push(11); originArray.push(12); originArray.unshift(0); console.log(originArray); console.log(newArray); 두 배열의 요소는 동일하다. 원본 배열이 변하면 새로운 변수에 담긴 배열도 변한다. 이유는??? 원본배열을 새로운 변수에 담아 냈을때 원본배열의 참조가 새로운 변수의 참조에도 할당이 되기 때문이다. Copy by reference (참조에 의한 호출) 이다. [참조 내용] ht..