Study/React

[React_study] array, object state 변경하는 법

* state 변경함수 동작원리 state변경함수를 쓸 때 기존state === 신규state 상태인지 먼저 검사해준다. 만약 같으면 state를 변경 해주지 않는다. JavaScript는 array/object 자료를 하나 만들면 자료는 Ram이라는 가상공간에 저장이 되고 변수는 그 자료가 어디 있는지 가리키는 화살표만 담고있다. (JavaScript reference data type) 따라서 완전 독립적인 array, object 복사본을 생성하려면 shallow copy, deep copy를 해주어야 한다. 방법으로는 spread operator 라고하는 문법이 있다. array혹은 object자료형 왼쪽에 붙일 수 있으며 괄호를 제거 해주세요. 라는 뜻을 가지고 있다. (array나 object..

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

[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에 보관하고 재사용할 수 있어서 큰 프로젝..