JSX 문법과 state

JSX 문법

{ 변수명 }

{ 함수명() } : 함수의 리턴값이 출력된다.

{ class명 }

 

JSX에서 이미지 넣는 방법

상단에 이미지 import 코드 작성

import 이미지명 from '이미지 파일 경로'

코드 안에다 작성할 때 { }를 사용해서 이미지 경로 불러오기

<img src="{이미지명}">

꼭 이렇게는 안하고 src='이미지명.jpg' 이렇게 직접 넣어도 되는데 위처럼 쓰면 편해서 이 방법을 주로 사용한다.

 

JSX에서 css 넣는 방법

css 인라인시트 style을 넣을 때는 오브젝트형식으로 넣어야한다.

그리고 font-size 처럼 '-'가 있는 것들은 camelCast기법으로 fontSize이렇게 써야한다. 

구분자로 ;가 아닌 ,를 써야한다.

style="{ { color : white, fontSize : 50px} }"

이 방법은 잘 사용하지 않고 변수에다 { color : white, fontSize : 50px} 이 내용을 넣어서 바인딩하거나 class를 따로 만들어서 바인딩한다.

 

 

 

데이터를 저장하는 방법

1. 변수에 저장

let test = "apple";

{test} // 사용

 

2. state에 저장

 

 

state란

state는 변수와 같이 데이터를 저장하는 공간이다.

변경되는 데이터를 다룰 때 사용하면 아주 좋은 저장공간이다.

자주 변경하는 데이터, 중요한 데이터는 모두 state로 저장해야한다.

 

 

사용방법

1. useState를 import 해준다.

react에 있는 useState내장함수를 갖다 쓰겠다는 뜻이다.

import React,{useState} from 'react';

 

2. useState 함수에 원하는 값을 매개변수로 넣어 호출한다.

useState('hello');

useState함수는 [a, b] 와 같이 두개의 값이 있는 배열을 반환한다.

a 자리에는 매개변수로 넣었던 hello가 들어있고, b자리에는 hello라는 값을 수정하기 위한 함수가 들어간다.

 

그리고 이 반환된 배열을 destructuring 이라는 문법을 이용하여 aa에는 hello값을, bb에는 state 데이터 변경 함수를 초기화하여 변수 2개를 만든다.

let [aa, bb] = useState('hello');

{ aa }//출력

그리고 {  }를 사용해 출력한다.

 

+ userState에 배열도 넣을 수 있다.

let [aa, bb] = useState(['hello', 'hi']);

{ aa } // hello hi
{ aa[0] } // hello

 

--------------

destructuring(자바스크립트 문법) 

let [one, two] = [10, 20];
// ==
// let one = 10;
// let two = 20;

배열 : [10, 20]

one이라는 변수에 10을 대입하고, two라는 변수에 20을 대입하여 변수 2개를 선언과 동시에 초기화하는 문법이다.

---------------

 

 

state를 사용하는 이유?

데이터를 변경하기 위해서

state로 만든 데이터가 바뀌면 데이터를 가지고 있던 html이 자동으로 렌더링되어 화면이 바뀌게 된다.
그냥 변수는 데이터가 바뀌어도 재 렌더링이 되지 않는다.(f5를 눌러야만 재 렌더링이 됨)

 

 

state값 변경하기

state 만들때 만들어진 함수를 이용하면 state의 값을 변경할 수 있다.

함수의 매개변수로 대체할 데이터를 넣어 호출하면 된다.

let [like, like_f] = useState(0);

like_f(5); // like값이 5로 변경됨

state 데이터 변경 함수를 사용하면 자동으로 재렌더링되어 f5를 누르지 않아도 값이 업데이트 된다.

 

state안에 배열이 들어간경우

state안에 배열이 들어간 경우 함수를 호출할 때 배열 그대로 매개변수로 넣어줘야한다.

예시

let [title, title_f] = useState(['제목1', '제목2', '제목3']);

//권장안함
title_f(['변경한 제목!', title[1], title[2]]); // title[0]만 변경하더라도 배열을 다 쒀줘야함

or

// 추천
var myArray = [...title]; // deep copy
myArray[0] = '변경한 제목!';
title_f(myArray);

[...title] : title배열을 깊은 복사(deep copy)한다는 의미다.

배열은 reference type이기 때문에 그냥 복사하면 주소가 복사되어 state를 가리키게 된다(얕은 복사).

그래서 배열의 값을 복사하려면 [... ]를 이용해야한다.

 

두 번째 변경방법을 추천하는 이유는 리액트 대원칙인 immutable data 때문이다.

immutable data는 데이터(data)는 불변(immutable)해야한다 즉, 데이터가 직접 바뀌면 안된다라는 원칙이다.

state를 직접 건드리지 말고 deep copy해서 그 copy한 것을 수정해야한다.

그래서 이런식으로 배열을 복사해서 원래 값을 변경하지 않고 데이터를 수정한다.

 

1. state 카피본 만들고
2. 카피본에 수정하고
3. 그 카피본 변경함수()에 집어넣기

 

 

 

JSX onClick 사용하는 법

<span onClick={ 함수 }>

{  }안에는 무조건 함수가 들어가야 한다.

( )=>{  }     or      함수명만

 

( )=>{ }    ==    function ( ) {  }

 

예시

<span onClick={()=>{like_f(like + 1)}}>👍 {like}</span>

 

 

 

 

 

출처 : https://www.youtube.com/playlist?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy 변형 및 요약