Array, Object State 변경하기

복사, 수정, 적용 array나 Object로 된 state를 변경할 때는 기존 state를 copy하여 수정 한 후 setState 해줘야 한다. let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']); { let copy = [...title]; copy[0] = '여자코트 추천'; setTitle(copy); } }>글 수정 setState(변경할 값) 함수의 동작 특징 기존 state와 변경될 state를 비교 후 다를때에만 state 변경을 해준다. array, object의 특징 JavaScript에서 array와 object가 담겨있는 변수에는 해당 값이 저장되는것이 아니라, 해당값이 저장되어 있는 공간에 화살표만 저장된다. s..

2022.11.11

useState()

1. useState() 사용하기 useState를 사용하려면 우선 상단에 useState를 import 해야 한다. useState라고 입력 후 엔터를 치면 상단에 자동으로 import 된다. state는 최상위 컴포넌트에 만드는게 좋다. 부모>자식 간 props 전송은 가능하지만 반대는 안되기 때문이다. import { useState } from 'react'; 2. useState() 문법 import { useState } from 'react'; function App () { let [작명 set작명] = useState('보관할 자료'); return ( 누르면 작명이 바뀐다 { 작명 } ) } export default App; let [작명 set작명] = useState('보관할 자료..

2022.11.11

JSX 문법 3가지

JSX란? import logo from './logo.svg'; import './App.css'; function App() { return ( ) } export default App; App.js 이 우리의 메인 페이지다. App.js에 div 하나만 남기고 삭제해보자. JS파일인데도 동작하는 이유는 HTML이 아니라 JSX이기 때문이다. JSX란 JavaScript 안에서 HTML을 쉽게 작성할 수 있게 도와주는 부가기능 혹은 언어라고 생각하면 된다. JSX를 사용하면 기존 HTML처럼 간단하게 레이아웃을 만들 수 있다. JSX를 쓰는 이유는.. 기존 문법으로 에서 하나를 만들려면 아래와 같이 써야한다. (길다) React.createElement('div', null, 'Hello World'..

2022.11.11

React 설치와 개발환경 셋팅

1. 개발환경 셋팅 1-1. node JS (LTS 버전)을 다운받아 설치한다. https://nodejs.org/ko/ 1-2. VS code Editor를 다운받아 설치한다. https://code.visualstudio.com/ 2. React 프로젝트 생성 2-1. 작업용 폴더 생성 후 우클릭 하여 PowerShell창 열기 (해당 경로가 설정 된 터미널이 뜹니다.) 2-2. 작업용 폴더가 경로로 설정 된 터미널에서 리액트 프로젝트를 생성한다. (엔터) PS C:/만든폴더 경로/ npx create-react-app 프로젝트명 npx create-react-app blog 2-2. 에러가 뜰 경우 PowerShell을 관리자 권한으로 실행 해 시도해본다. PS C:\\WIndows\\system3..

2022.11.11

React JS

React JS 공식사이트 https://reactjs.org/ 한국어 지원 사이트 https://ko.reactjs.org/ Facebook에서 개발한 자바스크립트 라이브러리(프레임워크가 아니다)이다. SPA(Single Page Application)이며 가상 DOM(Virtual DOM)을 활용한다. 다른 프레임워크나 라이브러리와 혼용이 가능하다 *장점 #Component 컴포넌트란 UI를 구성하는 개별적인 view 단위이다. 전체의 앱은 각 컴포넌트를 조립해서 만들어진다. 모듈화를 통해 유지, 보수가 용이하다는 점이 있다. 본인에게는 컴포넌트가 모듈화의 가이드라인을 제시해주는 것처럼 느껴진다. #JSX React에서 새로 도입된 자바스크립트 문법이고 React에서만 사용된다. JSX 문법을 사용하..

2022.04.15