개발환경 세팅
- node.js 설치
- npx create-react-app 프로젝트이름 → cd 프로젝트 이름
- npm start
이렇게 진행하면 되지만, 킹스톰에서 프로젝트 생성하면 완료 ^^


우선 리액트를 왜 쓰냐 ?
- Single Page Application 만들 수 있음
- component로 html 재사용 편리
- 데이터가 html에 자동 반영됨 → 맨날 이거에서 엄청 어려웠었다. api호출 하고 뭐하고 할 때..
import logo from './logo.svg';
import './App.css';
import {useState} from "react";
function App() {
let post = "역삼 우동 맛집 ";
let [글제목, b] = useState(['여자 코트 추천','맛집 추천','리액트 독학']);
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<div className="list">
<h4>{글제목[0]}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
JSX 문법
- class 넣을 땐 className
- 변수 꽂을 땐 {변수명}
- style 넣을 땐 style ={이름 : ‘값’}
let [글제목, b] = userState([’여자 코트 추천’, ‘맛집 추천’, ‘리액트 독학)
글제목 : 은 현재 상태값
b : 그 상태값을 업데이트하는 함수 이것이 state를 사용하는 이유
이 함수를 호출하면 ‘글제목’의 값이 변경되고, 해당 컴포넌트가 다시 렌더링됩니다. → 동적 데이터 관리
버튼을 만들어 기능을 추가하는 함수를 이용해보자!
let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','리액트 독학']);
let [따봉,따봉변경] = useState(0);
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<button onClick={ () =>{
let copy1 = [...글제목].sort();
글제목변경(copy1);
}}>가나다순 정렬</button>
<button onClick={ () => {
let copy = [...글제목];
copy[0] = '여자 코트 추천';
글제목변경(copy);
}}>글수정</button>
1.글 제목 변경을 해보자 ( ‘남자 코트 추천’ →’여자 코트 추천’)
처음에는 글제목변경(’여자 코트 추천’) 이라고 자의적으로 코딩했다.
당연히 안되었다. ‘useState 전체를 ‘여자 코트 추천’으로 변경해주세요’ 이기 때문이다. 그러면 useState 전체를 내가 원하는대로 바꾸어야겠다. 글제목변경(['여자 코트 추천','강남 우동 맛집','리액트 독학']) 이렇게 하니 설정 완료! but 좀 더 좋은 방법이 없을까? index를 이용하여
글제목[0] = ‘여자 코트 추천’
글제목변경(글제목);
근데 array/object 는 ‘원본’을 유지하는 것이 좋다
why? : 불변성(Immutability):
- 원본 데이터를 변경하지 않고 새로운 복사본을 만들어 작업하는 것은 불변성 원칙을 지키는 것입니다.
- 이는 예측 가능한 상태 관리를 가능하게 하며, 특히 React와 같은 프레임워크에서 중요합니다.
즉 copy본을 만들어서 원본은 유지한 채 state만 바꾸어보려했다. let copy = [글제목];
copy[0] = ‘여자코트 추천’;
글제목변경(copy) but 실행이 되지 않았다. 그 이유는 여기서 copy는 글제목 즉[ copy]==[글제목] 인것이다. 자바에서 공부했을 때처럼 이 Arrays는 참조데이터이므로 , 즉 데이터의 ‘주소’를 일컫는 것이지 거기 안의 변수명을 바꾸어주진 않는다. 그러므로, 지금 copy와 글제목의 주소가 같기때문에 글제목변경의 함수는 굳이 같은 ‘주소’에 관한 것은 업데이트 를 시켜주지 않는 것이다.
여기서 자바스크립트의 문법이 나오는데, '[…글제목]; 즉 […~~]를 하면 ‘지금 이 괄호를 없애고 새 괄호를 씌워주세요’ 인 것이다. 그러면 다른 주소를 일컫는 copy로 변경되며 글 수정이 잘 되는 걸 확인할 수 있었다!

2. 첫번째 글 제목에 따봉 버튼을 추가해서 누르면 1씩 올라가게끔 해보자 !
function App() {
let post = "역삼 우동 맛집 ";
let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','리액트 독학']);
let [따봉,따봉변경] = useState(0);
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<button onClick={ () =>{
let copy1 = [...글제목].sort();
글제목변경(copy1);
}}>가나다순 정렬</button>
<button onClick={ () => {
let copy = [...글제목];
copy[0] = '여자 코트 추천';
글제목변경(copy);
}}>글수정</button>
<div className="list">
<h4>{글제목 [0] } <span onClick={() => { 따봉변경 (따봉+1) }}>👍</span> {따봉}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목 [1] }</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
우선 let [따봉, 따봉변경] = userState = (0);
으로 0으로 시작하는 useState를 만든다.
그 이후 첫번째 글제목 옆에 {글제목 [0] } <span Onclick = { () ⇒ { 따봉변경 (따봉 + 1} } >👍</span>{따봉} 👍를 클릭할 때 터지는 이벤트는(이벤트 핸들러) 따봉을 따봉 +1 로 업데이트를 해주는 함수 실행!

이렇게 버튼을 클릭할 때마다 좋아요가 올라가는 기능 추가 완료!
3.가나다순으로 정렬해보자!
다음과 같은 글제목을 ‘가나다’순으로 정리해보자!
부끄럽게 하드코딩 해보았다. ex)
let copy1 = […글제목]
copy1[0] = ‘강남 우동 맛집 이런식으로 하지말고 그냥 let copy1 = [...글제목].sort();
sort() 메서드 사용하여 기능을 이용하여 ‘가나다순 정렬’ 버튼을 클릭하면,

가나다순 정렬 완료! 객체 지향적으로 코드만을 위한 코딩을 하자 ! 내가 그냥 생각하는대로 코딩하지 말고 프로그래밍의 규칙에 맞게 코딩하는 습관을 들이자!