React

리액트는 긴 html 을 한단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. 바로 Component라고 합니다. 이걸 이용하면 html을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. function App (){ return ( (생략) ) } function Modal(){ return ( 제목 날짜 상세내용 ) } 컴포넌트 만드는법 1. function 을 이용해서 함수를 하나 만들어주고 작명합니다 2. 그 함수안에 return() 안에 축약을 원하는 html을 담으면 됩니다 3. 원하는 곳에 사용하면 아까 축약한 html이 등장합니다 컴포넌트 만들때 주의할점 1. 보통 영어대문자로 작명 2.return () 안엔 html 태그들이 평행하게 여러개 XX, 대왕 태그 하나로..

글 수정버튼을 누르면, 내용이 바뀌게 만들고 싶어요. 글제목 중 '남자코트추천' => '여자코트추천'으로요 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { ??? } }> 수정버튼 ) } 그래서 이렇게 바꿨습니다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( {글제목변경(['남자코트 추천', '강남 우동맛집', '파이썬 독학'])} }> 수정버튼 ) } state 변경함수는 ()안에 넣은 걸로 기존 state를 갈아치워주니까 저렇게 집어넣으면 됩니다. 그러면 여기서 문제, 왜 ..

좋아요 버튼을 누르면 옆에 있는 수가 +1 되게 만들어볼거예요 좋아요 버튼 만들기 function App(){ let [따봉] = useState(0); return ( { 글제목[0] }👍🏻{따봉} ) } useState()쓰고 왼쪽에 let [] 으로 작명만 잘하면 됩니다 원래 let [] 안에 변수를 두개 쓰는데, 일단 1개만 할게요 onClick 사용법 우리가 원하는 건 버튼이 그대로 있는 것이 아니라 버튼을 누를때, state 가 1씩 증가하는 기능입니다 먼저 html 파일에서 onclick 사용법은 ? JSX에서는 이렇게 만듭니다. {}를 써서 넣어줬어요 {실행할코드} }> 근데 함수만드는게 귀찮으면 함수를 그 자리에 직접만들어버려도 됩니다. 함수를 재사용할게 아니라면 굳이 작명을 안해도 됩니..

예전에는 그냥 let post = '어쩌구' 이런식으로 변수에 데이터를 저장했었는데 리액트에서는 변수말고 state 를 만들어서 데이터를 저장해둘 수 있어요 import { useState } from 'react'; import './App.css' function App(){ let [a,b] = useState('남자 코트 추천'); return ( 개발 blog {a} 2월 17일 발행 ) } 0. 맷윗줄에 import {useState} from 'react' 1. useState('보관할자료') 라고 쓰면 state에 자료를 잠깐 저장할 수 있습니다 2. 이 state를 쓰고 싶으면, let[a,b] = useState('남자 코트 추천'); a 자리에 state 이름을 자유롭게 작명한 다음 ..

리액트에서는 html 대신 JSX 라는 걸 씁니다. 주의할 점은 JSX는 HTML처럼 생겼지만, HTML이 아니기 때문에 JSX만의, 지켜줘야 할 문법이 있는데요 import logo from './logo.svg'; import './App.css'; let post ='강남 우동 맛집'; function App() { return ( 블로그임 {post} ); } export default App; 여기서 JSX 특징적인 문법 3가지를 찾아보세요~ 1. html 에 class 넣을땐 className JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class 라는 키워드를 막 사용하면 안된다. class =""를 넣고 싶으면 className 이라고 써야 한다. 2. 변수를 html..