[React] React란?

 개발환경 세팅

1. node.js 설치
2. npx create-react-app 프로젝트이름 → cd 프로젝트 이름
3. npm start

이렇게 진행하면 되지만, 킹스톰에서 프로젝트 생성하면 완료 ^^

 

우선 리액트를 왜 쓰냐 ?

1. Single Page Application 만들 수 있음
2. component로 html 재사용 편리
3. 데이터가 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() 메서드 사용하여 기능을 이용하여 ‘가나다순 정렬’ 버튼을 클릭하면,

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