printf("Hello POTATO World");

리액트에서 동적인 UI 만드는 step1. html css 로 미리 UI 디자인을 다 해놓고2. UI 의 현재 상태를 state 로 저장해두고3. state 에 따라서 UI 가 어떻게 보일지 조건문 등으로 작성  글 제목을 누르면 modal 창 등장하도록 설정  1. html css 로 미리 UI 디자인 해놓기    이제 글 제목을 누르면 이 창이 뜨도록 할 것이다. 2. UI 의 현재 상태를 state로 저장  let [modal, setModal] = useState(false);   영어로 작명 시 state 변경 함수는 set을 앞에 붙이는게 관습3. state 에 따라서 UI 가 어떻게 보일지 작성   className = "list">        onClick = {() => {      ..

className = "modal">      제목      날짜      상세 내용    .modal{  margin-top: 20px;  padding: 20px;  background-color: #eee;  text-align: left;} 이런 모달창 하나를 디자인 해준다.  복잡한 html 을 한 단어로 치환할 수 있는 컴포넌트 문법 리액트는 html 을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.함수 문법을 이용해서 html 을 하나의 태그로 만들어 가독성을 높일 수 있음   const Modal = () => {  return (    className = "modal">      제목       날짜       상세 내용       )}function Modal(){  ..

array, object 자료일 경우 state 수정할 때 약간의 어려움이 존재한다.   /* eslint-disable */import logo from './logo.svg';import './App.css';import { useState } from 'react';function App() { //let post = "강남 우동 맛집"; // 자주 변경 될 것 같은 html 부분은 state로 만들어놓기 let [title, modifyTitle] = useState(["여자코트 추천","강남 우동 맛집", "파이썬 독학"]); // [state 에 보관했던 자료, state 변경 도와주는 함수] let [like, addLike] = useState(0); return ( ..