React 환경에서 동적인 UI 만들기 (삼항 연산자)

동적인 UI 만드는 3 step 1. html CSS로 미리 디자인을 완성한다. 2. UI의 현재 상태를 state로 저장한다. 3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성한다. function App () { let [modal, setModal] = useState(false); return ( { setModal(!modal) }}>모달창 여닫기 { modal === true ? : null } ) } function Modal () { return ( 나는 모달창 ) } JSX에서 조건문 쓰는 법 JSX 안에서는 if else 문법을 바로 사용할 수 없다. 때문에 삼항연산자를 써야한다. 삼항연산자는 JSX 중괄호 안에서 사용 가능하다. 조건식 ? 조건이 참일 때 : 조건이 거짓..

2022.11.11

Component 생성, 파일분리

복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. component라고 합니다. 이걸 이용하면 함수나 변수를 만들듯이 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 넣을 수 있습니다. function을 이용해서 함수를 하나 만들어주고 return안에 JSX를 작성한다. 원하는 곳에 을 넣어준다. function App (){ return ( ...생략... // Component ) } function Modal () { return ( 제목 날짜 상세내용 ) } Component 만들 때 주의 점 1. Component 작명 시 첫 글자는 대문자로 한다. 2. 로 써도 되고 로 써도 된다. Co..

2022.11.11

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