React

글 수정버튼을 누르면, 내용이 바뀌게 만들고 싶어요. 글제목 중 '남자코트추천' => '여자코트추천'으로요 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..