React : JSX, useState

김미영·2022년 10월 10일

10월

목록 보기

5/6

JSX

대표적인 JSX 문법 3개

class

<div className="">
  class를 추가하고 싶을 땐 "className"
</div>

인라인 style 적용

<div style={{color: "red"}}>
  인라인으로 style을 적용하고 싶을 땐 중괄호 두개 안에 입력
</div>

변수를 넣을 땐 중괄호

let 변수 = 'Im 변수'
<div>
  { 변수 }
</div>

useState

- 자주 변경할 것 같은 변수는 useState로 관리하자.

function App(){

  let [변수이름, 변수 내용을 변경할 때 쓸 변수이름] = useState('변수에 넣을 내용');
  
  return (
    <div>
    {변수이름}
    </div>
  )
}

이렇게 변수 형식으로 함수 안에 넣어주면 된다.

useState를 써야하는 이유
- state를 쓰던 html은 state 가 변경되면 자동 재랜더링이 되고있다.

- 한개의 useState에 여러개의 값을 넣기.

function App(){
  
	let [a, setA] = useState([
      1,
      2,
      3
    ]};

	return (
		<div>
        	{a[0]}                
        </div>
    )

배열로 만들어버린다.

- useState를 변경하는 방법.

function App(){
  
	let [a, setA] = useState(0)
      
	return (
		<div>
        	<span onClick={()=>{
      			setA(a+1)
    		}}>
            클릭{a}
			</span>           
        </div>

클릭 이라는 문구를 클릭하면 a가 1씩 증가함
변경할 때 사용하는 setA 변수 이름 뒤에 변경할 내용을 기재하면 됨.

- 배열 안에 있는 값을 변경하는 방법

안녕 이라는 문구가 재수없다. 버튼을 누르면 예의바르게 변경되게 해보자.

function App(){
  
	let [a, setA] = useState([
		'안녕',
      	'잘가요',
      	'또봐요'
    ]};

	return (
		<button onClick = {()=>{
            a[0] = '안녕하세요';
            setA(a);
    	}}>
        변경버튼
        </button>

		<div>
			{a}
		</div>
    )

버튼을 누르면 재수없게 반말하던 문구가 예의바르게 고쳐지는 것을 볼 수 있다.
근데 이 방법은 원본의 데이터를 영구적으로 변경하는 방법이라 추천하지 않는다.
원본 데이터를 보존하는 방법으로 다시한번 해보자.

function App(){
  
	let [a, setA] = useState([
		'안녕',
      	'잘가요',
      	'또봐요'
    ]};

	return (
		<button onClick = {()=>{
            let copy_a = [...a];
      		copy_a[0] = '안녕하세요';
            setA(copy_a);
    	}}>
        변경버튼
        </button>

		<div>
			{a}
		</div>
    )

조금 복잡해졌지만 간단하게 생각하자.
1. 카피본을 만든다.
2. 카피본의 배열값을 수정해준다.
3. 변경함수이름에 카피본을 넣는다.
[... ] 은 왜넣는데요?
1. state 변경 함수의 특징 :
데이터 절약을 위해 기존 state != 신규 state 일 경우, 변경 해주지 않는다.
2. array,object 의 특징 : 자바스크립트랑 똑같다.
원시타입은 값이 저장되지만, 배열과 객체(참조타입)는 값의 메모리주소가 저장되어있어 "참조형변수"이다.
3. 첫번째 예제처럼 [... ]을 사용 안하면, 값을 복사하는게 아닌, 값을 가르키는 데이터 주소만 복사된다. 정상적으로 변경이 될 수 없다.
4. [... ] 은, 데이터 주소를 바꿔주세요. 라는 뜻이라고 한다.
완전히 독립적인 배열의 사본이 만들어진다고 볼 수 있다.

let copy_a = a;
copy_a[0] = '안녕하세요';

copy_a == a  // true

이렇게 주소값만 복사되니 0번째 index가 변경되어도 동일한 값이라고 나온다.
가나다 순으로 정렬할 때 카피본은 이렇게도 쓰인다.

function App(){
  
	let [a, setA] = useState([
		'다람쥐',
      	'비둘기',
      	'참새',
      	'강아지'
    ]};

	return (
		<button onClick = {()=>{
            let copy_a = [...a];
      		copy_a.sort()
            setA(copy_a);
    	}}>
        변경버튼
        </button>

		<div>
			{a}
		</div>
    )
    
   // 정렬 함수인 .sort를 추가로 이용하면 된다.

자 정리해보자. useState를 변경하려면 아래 순서를 거치자.
1. [... ] 를 이용하여 독립적인 복사본을 만든다.(원본을 지키자!)
2. 수정하고자 하는 문법을 입력
3. 변경함수(카피본변수이름) 을 입력하면 완성

useState를 처음 접할 때는 변경하는 방법이 너무 어렵다고 생각했는데, useState만 다른영상 포함 10번이상 보고, 마지막으로 이렇게 정리를 해가니, 이해가 완벽히 됐다.
이제 props로 넘어가도 될 것 같다.