[React] React 기초 문법 - state

 

1. return() 안에는 병렬로 태그 2개 이상 기입 금지

 

• 아래와 같이 병렬로 태그가 생긴다면 오류 발생

 

2. 자료를 잠깐 저장할 때 -> 중요한 데이터는 변수가 아닌 state에 담기

1. 우선 {useState} 를 import 해준다.
2. 이후 useState(보관할 자료)
3. 나중에 사용하기 위해서 let [작명, 작명]
   • 앞의 작명 = 보관하는 자료
   • 뒤의 작명 = state 변경 도와주는 함수
   • 이 때, 뒤에 state 변경 도와주는 함수의 경우 사용하지 않으려면 작성해주지 않아도된다.
   • 작명시 -> 직관적으로 

 

• Array 형식으로도 저장 가능
• 각 내용은 인덱스로 접근

let [postName, b] = useState(['Seoul','Busan','Daegu'])

 

Destructuring 문법

위와 같이 let [A, B] = 처럼 이러한 문법을 Destructuring 문법이라고 한다.

// array 자료가 존재할 때 -> (한 곳에 저장하기 위해 사용)
let num = [1,2] 
// 여기서 1, 2를 변수로 빼고 싶다면
let a = num[0];
let c = num[1];

// 위 코드를 좀더 편하게 사용

let [a, c] = [1, 2];

 

 

왜 state를 사용하는지?

• 변수 문법이 있는데 왜 state를 사용할까?
• 둘의 차이점
  • 변수
    • 데이터 바인딩을 통해 입력해놨는데 변수가 변경되는 경우 발생
    • html에 자동으로 반영이 되지 않는다.
  • state
    • 자동으로 html이 재랜더링 된다.
• 따라서 자주 바뀌는 내용에 한해서 사용해주자.
• 페이지 이름 등 자주 바뀌지 않는 내용은 변수로 할당해주거나 하드코딩

 

 

변수 state 변경하기

1. 등호로 변경 x
   
   • a = a + 1 과 같이 등호 사용 금지
2. 변경 함수를 이용
   • 사용 함수 내에, 변경 함수 넣어서 사용
3. 특징
   
   • 기존 state == 신규 state의 경우 변경 xxx
   • 일종의 에너지 절약

 

아래 좋아요 버튼 구현하면서 확인해보기!!

 

 

3. OnClick

 

• 좋아요 버튼 클릭시 -> 좋아요 개수 올려주기
• 좋아요 개수 -> 자주 변화 -> state로 작성해주자

  let [likeCount, changeLike] = useState(0);

 

• onClick 안에는 함수가 들어가야 된다.
• 중괄호 내에 함수를 바로 넣어주어도 상관 x

• 함수에 등호가 아닌 state 변경 함수 사용

 

4. Array, Object state 변경

• Array로 되어있는 부분을 아래와 같이 변경하면
• Array 내부 전체가 바뀌게 된다.

let [postName, changePostName] = useState(['Seoul','Busan','Daegu'])

<button onClick={()=>{
        changePostName('Incheon');
      }}>글 수정</button>

• 아래와 같이 일부만 변경 가능

<button onClick={()=>{
        postName[0] = 'Incheon'
        changePostName(postName);
      }}>글 수정</button>

 

• 위와 같은 방법은 원본을 변경해버림
• 따라서, array/object 다룰 때는 원본은 보존하는 것이 좋다.
• 카피본을 만들어서 바꿔주자.

<button onClick={()=>{
        let copy = postName;
        copy[0] = 'Incheon';
        changePostName(copy);
      }}>글 수정</button>

 

• 하지만 글 수정 버튼 클릭해도 아무 일도 안 일어남
• why?
  • 동작원리를 알아야 한다.
  • arry / object의 특징
    
    • arr에 [1,2,3]을 담는 것이 아니라
    • [1,2,3]이라는 데이터가 있는 곳(RAM 주소)을 가르키는 화살표만 변수에 저장
    • reference data type

let arr = [1,2,3];

 

• 따라서, copy[0] 변경은 데이터 내부 변경이 되지만, 화살표가 변경된 것이 아님
• 기존의 state == 신규state가 되므로 변경이 되지 않는다.
• 아래와 같이 Spread operator를 이용하여 복사해준다.
  • 독립적인 카피본을 만드는 것 
  • 쉽게 말해, 괄호를 벗기고 다시 씌우는 것

let copy = [...postName];

 

사전 순 정렬시키기 (필터)

 

• 위와 같이 copy = [...~] 이용하여 복사해준다.
• sort()를 이용하여 사전순 정렬 가능
• 다른 정렬 조건의 경우 공부해보기!!

<button onClick={ ()=>{
        let copy = [...postName];
        copy.sort();
        changePostName(copy)
      }}>정렬하기</button>