[React] 2023.06.13 2일차

5강 버튼에 기능개발을 해보자 & 리액트 state 변경하는 법

1개의 state안에 여러가지 자료를 넣고싶다면 array형식으로 만들어서 사용

아래와 같이 만들어서 사용함

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>

터미널을 실행해보면 빨간색 error랑 warning 이렇게 두가지가 나오는데

빨간색의 경우는 중요한 거라서 해결해야함

노란색의 경우는 무시해도 됨.

노란색이 좀 지우고싶다.

/* eslint-disable*/

→ Lint 끄는 기능(워닝을 출력해주는 기능을 Link)

좋아요 버튼 & 갯수 UI 만들기

<div className="list">
        <h4>{ 글제목[0] }<span>👍</span> 0 </h4>
        <p>2월 17일 발행</p>
      </div>

이렇게 좋아요 버튼을 span으로 해서 만들었음.

이후 저 따봉을 누르면 옆에 0의 숫자가 올라가게 만들건데

0을 state로 해서 만들면 좋다.

state를 쓰는 이유는 페이지 내에 자주 바뀌는 것들을 state로 만들면 좋음

아래와 같이 state로 만들었는데, 작명 2개가 가능한데 따봉은 실제 state고 오른쪽 c는 state 변경 함수이다.

변경함수란 ????

state 값을 변경하기 위해 사용되는 함수를 일컫는다. 즉 따봉이라는 실제 state를 작업을 걸쳐 새로운 값을 할당하는 역할을 한다.

let [따봉, c] = useState(0);

따봉을 구현을 해줄건데, 이 버튼을 눌렀을 때 숫자가 올라가게 하려면

onClick이라는 함수를 사용 → 이벤트 핸들러라고 함

{ }안엔 함수 이름을 넣어야 함

→ 함수 만드는 문법을 바로 넣어도 상관 없음

→ arrow function : () ⇒ {}

<div className="list">
        <h4>{ 글제목[0] } <span onClick={ 함수 }>👍</span> {따봉} </h4>
        <p>2월 17일 발행</p>
      </div>

<div className="list">
    <h4>{ 글제목[0] } <span onClick={ function 함수(){ console.log(1);} }>👍</span> {따봉} </h4>
         <h4>{ 글제목[0] } <span onClick={ () => { console.log(1);} }>👍</span> {따봉} </h4>

<p>2월 17일 발행</p>
      </div>

그래서 아래와 같이 함수를 생성

function 함수(){
  console.log(1);
}

state 변경하는 법

변경 할 때 등호로 변경하면 안된다.

let [따봉, 따봉변경] = useState(0);

state변경함수(새로운 state)

따봉변경이 state 변경함수로 됨.

state 변경함수를 쓰는 이유가 html 재렌더링이 잘됨

state 변경함수도 function이라 ()를 같이 입력해야함.

아래와 같이 입력하면 따봉변경(1)에는 ()안에는 state 변경될 값 입력

<div className="list">
        <h4>{ 글제목[0] } <span onClick={ 따봉변경(따봉+1) }>👍</span> {따봉} </h4>
        <p>2월 17일 발행</p>
      </div>

만약 숫자가 아닌 문자라면

let [따봉, 따봉변경] = useState('안녕');

아래와 같이 변경하면 안녕에서 반가워로 변경됨

<div className="list">
        <h4>{ 글제목[0] } <span onClick={() =>  따봉변경('반가워')}>👍</span> {따봉} </h4>
        <p>2월 17일 발행</p>
      </div>

정리하자면

1. onClick 이벤트 핸들러 쓰는법

→ html 클릭했을때

→ onClick={} 안에는 함수를 넣어야 함

1. state 변경하는 법

→ state 변경함수를 사용하고, ()안에는 state가 변경할 값을 입력

6강 array, object, state 변경하는 법

숙제 - 여자 코트 추천으로 변경

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬 독학']);

내가 짠 방식은 이러한 방식이다.

처음 코드를 짰을 때 단순하게

 

<div className="list">
        <button onClick={ () => b[0](글제목변경)}>글수정</button>
        <p>2월 17일 발행</p>
      </div>

이렇게 변경함수에 인덱스를 줘서 했는데, 이 방식은 아예 안되는 방식이었다. 오류가 나고 구글링을 하다보니, 

원본에서 변경하는 것이 아닌 복사본을 만든 후 변경해야한다는 사실을 알게 되었다.

아래는 구글링했을 때의 코드이다.

 

현재 글제목변경자리에는 변경함수가 들어가고 그 이후 ()에는 state의 변경값이 들어간다.

…스프레드를 사용하여 배열 푼 이후 인덱스[1] 포함 뒤에를 복사 후 앞에 여자 코트 추천과 합쳐 글제목 변경을 바꿔준다. 그래서 결국 뒤에 강남 우동맛집과 파이썬 독학은 그대로 이고 남자 코트 추천이 여자 코트 추천으로 바뀐다.

<div className="list">
        <h4>{ 글제목[0] } <span onClick={() =>  따봉변경(따봉+1) }>👍</span> {따봉}</h4>
        <button onClick={ () => 글제목변경(['여자 코트 추천', ...글제목.slice(1)])}>글수정</button>
        <p>2월 17일 발행</p>
      </div>

만약 array/object 를 다룰 때 원본은 보존 하는게 좋다.

아래와 같이 원본 데이터를 수정하는 방식보다는

<button onClick={ () => {
          글제목[0] = '여자코트 추천';
          글제목변경();}}>글수정</button>
        <p>2월 17일 발행</p>

아래와 같이 copy본을 하나 만들어서 그 안에서 수정 후 바꾸는 형식이 좋다.

근데 이렇게 작성을 하면 동작이 되지 않는다.

<button onClick={ () => {
          let copy = 글제목;
          copy[0] = '여자코트 추천';
          글제목변경(copy);
          }}>글수정</button>

let copy = 글제목

→ 화살표만 복사함

변수 1 & 변수 2 화살표가 같으면

변수1 == 변수2 비교를 해도 true 가 나옴

아래 콘솔로그 찍어도 이렇게 나옴

이러한 현상이 궁금하다면 array, object는

reference data type을 공부해보자

let copy = 글제목;
          copy[0] = '여자코트 추천';
          글제목변경(copy);
          console.log(copy == 글제목)
          }}>글수정</button>

아래와 같이 바꾸는 이유는

화살표를 새로 바꿔줌

[…글제목]은 배열(괄호)를 벗겨주고 []로 다시 입혀주세요 라는 의미

이러면 화살표도 달라짐

<button onClick={ () => {
          let copy = [...글제목];
          copy[0] = '여자코트 추천';
          글제목변경(copy);
          }}>글수정</button>

state 변경 함수 특징

변경함수(copy)

→ (copy) 이 부분을 바꿔준다.

기존 state == 신규 state의 경우는 변경을 해주지 않는다.

일종의 에너지 자원이다. 비교를 해서 같으면 굳이 바꿔주질 않는다

array/object 특징

array/object 담은 변수엔 화살표만 저장됨

 

let arr = [1, 2, 3];

→ [1, 2, 3]이 어딨는지 알려주는 화살표만 들어 있음.

글제목[0] = '여자코트 추천';
          글제목변경(글제목);

 

이렇게 해도 안됨.

이렇게 바꿔주긴 함

글제목에 있는 화살표는 변경이 안됨

array를 수정했지 변수에 있던 화살표는 수정이 안됨

→ 신규 state 이랑 기존 state를 같다고 생각함.

 

state가 array/object면 shallow copy를 만들어서 수정해야함

원본을 직접 건드는게 아니라 복사본을 하나 만들어서 거기서 변경을 해야 한다.

 

숙제 - 가나다 순 정렬하는 버튼을 만들어라

아래와 같이 코드를 작성했다.

 

복사본(copy1)을 만들어 원본 변경이 아닌 복사본 변경을 한다.

copy1에 sort()라는 함수를 사용

sort()함수는 js에서 배열을 정렬하기 위해 사용한다.

→ 이 함수는 기본적으로 문자열을 기준으로 정렬이 가능하다.

→ 숫자는 다르게 되니 확인을 잘해야한다.

<button onClick={ () => {
          let copy1 = [...글제목];
          let copy2 = copy1.sort();
          글제목변경(copy2);
        }}>가나다순정렬</button>

숫자의 경우는

아래와 같이 -를 사용하여 a - b가 음수면 a가 b보다 작기 때문에 오름차순으로 정렬이 된다.

내림차순의 경우 반대로 b - a를 하면 된다.

const numbers = [10, 5, 8, 2, 1];
numbers.sort((a, b) => a - b);

console.log(numbers);

7강 Component : 많은 div들을 한 단어로 줄이고 싶으면

html을 보며 가끔 더러울 때가 있음

div가 일억개 있을 수 도 있다.

아래와 같은게 파일 안에 일억개 있다고 생각하자.

<div className='modal'>
            <h4>제목</h4>
            <p>날짜</p>
            <p>상세내용</p>
          </div>

그래서 리액트에 함께 묶을 수 있는 기능이 있다.

이를 만들때 단계가 있다.

1. function을 만든다.
   1. function 만드는 위치가 중요함 function안에 만들면 안됨. 바깥에 만들어야 함
   2. 아래와 같이 이 중괄호 밖에 만들어야 함

   function App() {
   } 
   function Modal() {
   }
   

2. 작명의 경우는 대문자로 시작해야한다.
3. return()안에 html을 담는다.
4. function Modal(){ return ( <div className='modal'> <h4>제목</h4> <p>날짜</p> <p>상세내용</p> </div> ) }
5. <함수명></함수명> 혹은 <함수명/> 를 사용한다.
   1. 원하는 곳에 가서 아래 와 같이 사용하면 된다.

   </div>
   
    <Modal></Modal>
   
    </div>
     );
   }
   

예시)

<Modal></Modal>

<Modal/>

만약 return()안에 html 병렬 기입하려면

아래와 같이 사용하면 된다.

의미 없는 div로 감싸는 대신 <></>를 사용하면 된다. 이를 fragment 문법이라 한다.

unction Modal(){
  return (
    <div> 대신에 -> <>
    <div className='modal'>
    <h4>제목</h4>
    <p>날짜</p>
    <p>상세내용</p>
  </div>
  <div></div>
 </div> -> </>
  )
}

정리. 컴포넌트를 언제 쓰면 될까??

1. 반본적인 html를 축약 할 때
2. 큰 페이지 전환 할 때 (큰 1page)
3. 자주 변경되는 html UI들을 컴포넌트를 만들어놓는게 좋은데 항상 이런건 아님.

컴포넌트의 단점

1. 다른 function에 있는 변수를 끌어다 쓰지 못한다.위와 같이 되어 있다면, 새로고침을 했을 때 오류가 나온다.아래와 같이 다른 App 함수에 포함된 변수라서 끌어다 쓰지를 못한다.그리고 또 다른 이유는 다음 강의에 있기에

   function App() {
   
     let post = '강남 우동 맛집'
     let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬 독학']);
   )
   }
   

2. 다음 이시간에 설명하겠다.
3. 이를 방지하기 위해서는 무분별한 컴포넌트 생성은 멈춰야 한다. 자주사용하는 것만 만들자
4. 그 이유는 저 글제목이라는 변수는 Modal에 포함되어 있는 것이 아닌
5. function Modal(){ return ( <div className='modal'> <h4> { 글제목[0] }</h4> <p>날짜</p> <p>상세내용</p> </div> ) }

컴포넌트 만드는 문법 2

함수표현식

let Modal = () => {
  return(
    <div></div>
  )
}

const Modal = () => {
  return(
    <div></div>
  )
}

 

 

여기서 스프레드 개념이 사용된다. 처음 스프레드 개념과 바뀌는 원리가 이해가 되지 않았다. 같이 공부하는 분께서 

개념을 설명해주셨을 때서야 이해가 되었다. 리액트가 자바스크립트의 문법들을 바탕으로 만들어진 라이브러리인데 진짜 자바스크립트의 문법을 자세하게 알아야 겠다는 생각이 들었다.