[React] 레이아웃 만들 때 JSX 문법, state, 버튼 기능, state 사용법

React/React 강의 개념 정리

[React] 레이아웃 만들 때 JSX 문법, state, 버튼 기능, state 사용법

Dev dreamer 2023. 1. 19. 13:52

React 는 JSX 언어이다. .js파일에서 쓰는 html 대용품 이라고 생각하면 된다.

이걸 쓰는 이유는 react 에서 div 같은걸 만들려고 하면

이러한 긴 문장으로 만들어야 하는데

사람들이 이용하가 쉽게 하기 위해서 jsx 언어로 사용하여 <div></div>

JSX 는 HTTP랑 다른 문법 몇가지가 있는데

1. class 이름 넣을때는 className 을 통해서 넣는다.

2. 변수를 넣을때에는 {중괄호} 를 이용해서 넣을 수 있다

보통 html 애서 변수의 값을 넣고 싶으면 아래와 같은 긴 문장으로 만들어야 한다.

let post 에 선언된 변수를 넣고자 할 떄

위의 긴 코드의 경우가

react 에서는 {post} 를 넣음으로서 해결이 가능하다.

이러한 post 라는 데이터 값을 화면에 표시하는곳 뿐만 아니라 div 에 id 등을

지정할 때에도 id={} 이러한 방식으로 선언이 가능하다.

3.style 넣을 땐 style={{스타일 명 : '값'}}

중괄호 넣어서 스타일 값을 넣어준다. 중괄호 안에 오브젝트 형태의 값으로 넣어야 한다.

오브젝트 형태 => 중괄호 안에 넣는 느낌.

여러가지 넣고 싶으면 , 로 구분해서 넣을 수 있다.

state

자료를 잠깐 저장할 땐 변수를 사용한다.

let post = "규 훌륭해"

비슷한 기능으로 State 를 이용해 변수를 저장할 수 잇따.

useState 를 통해서 선언한 변수와 그 변수를 바꿀수 있는 기능을 것을

각각 suggest , setSuggest 로 선언해 줬다(a,b 라고 선언해도 된다)

useState(' ' ) 이 괄호 안에는 첫 변수의 초기값이 들어간다.

배열에서 Destructuring 문법을 통해 변수를 넣을 수 있는데

선언한 변수의 에 맞게 배열의 데이터 값들을 넣어주면 이용 가능하다.

즉 위의 useState 를 다시 생각해보자

let [a,b] 배열의 2개의 변수가 선언되었다

이후 useState 뒤에 하나의 초기값만 선언되어있는데 잘 생각해보면

['초기값 변수', 함수] 가 담겨있다고 생각하면 된다.

그렇다면 State 문법을 언제 쓸까?

변수 문법이 있는데 왜 state 를 따로 쓰는 걸까?

차이점이라고 하면 변수는 새로운 데이터를 받아오거나 수정할 때 변경했을때 자동으로 화면에서 바뀌지 않는다

하지만! State 의 경우는

state 안에서 관리했던 변수의 경우 state 의 변수값이 바뀌면 html이 자동 랜더링 되어

이러한 기능을 이용할 때 state 를 사용한다.

그래서 모든 변수를 state 로 쓰는게 아니라 자주 안바뀌는 전체 사이트 제목같은 경우는

그냥 변수로 선언해주고 어떠한 동작이나 변화가 자주 일어나는 변수를 State 로 관리하면 좋다.

warning 과 error 는 다르다

warning 같은 경우는 내가 선언해놓고 사용하지 않은 변수들에 대한 안내정도이고

error 는 시스템 자체에 영향을 줄 수 있는 코드의 작동의 여부를 결정하는 부분이라 꼭 수정해야한다.

warning 을 보고 싶지 않을때에는 /*eslint-disable*/ 을 코드 상단에 쳐주면 된다.

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

대박 !!

크롬에서 ! 주소에 오른쪽 마우스 클릭해서 이모지 가져온걸 REACT 에서 이용가능함!!!

제목을 쓰고 옆에 좋아요 기능을 만들어서 클릭 했을때 카운터가 하나씩 늘어나도록 만들어 보자.

onClick 을 이용해서 클릭했을때 숫자가 하나씩 올라간다

db에 아직 연결하진 않아서 화면 새로고침시 다시 0으로 돌아간다.

Onclick 안에는 함수를 넣어야 하는데

함수 정의 부분을 모두 담아도 상관 X

등으로 여러가지 방법으로 함수의 기능 자체를 onclick 에 담을 수 있다.

두번째 꺼 같은 경우에는 함수를 아예 만들기 귀찮을때 함수 자체의 기능을 뒤에 넣어서 이용 하는것이다

java 에서는 익명의 함수라고 배웠던 기억이 있다.

State 는 setState 를 통해서 변경을 해야 렌더링이 제대로 일어난다.

이 상태에서 남자코트 추천을 눌렀을때 여자 코트 추천이 바뀌도록 해라!!

내가 그전에 했던 객체리터럴을 포함한 useState 를 통해서 바꿔보았다.

각 코트추천을 배열에 담는것이 아닌 객체 리터럴에 담는다.

그 후에

클릭을 했을때 useState 내부의 객체리터럴 의 정보값이 바뀌도록( 좋아요 숫자는 시도해봤는데 안됨.. ㅠㅠㅠ type 어쩌구..)

그리고 값을 가져올때는 이런식으로 가져오면 원하는 arr1 의 값만 바꿀수 있도록 할 수 있었다.

강사님의 코드

강사님은 return 문 안에다가 함수를 바로 선언해서사용(함수를 따로 선언하지 않아도 돼서 편리함.)

이렇게 모든 Array 다 넣는 방법 말고 훨씬 간단한 방법이 있었다!!

onClick 을 하면 array 자체를 바꿔주고 그 배열을 통째로 setArray 에 넣어서 수정해준다!

하지만!! 영구적으로 기본 함수가 바뀌므로 array 나 object 의 원본이 수정됨.

따라서 copy 문을 하나 만들어서

let copy = 글제목 => copy 라는 곳에 글제목 array 의 값을 대입하고

copy[0] = '여자코트추천' 을 넣어서 다음을 진행하면 원본이 보존됨과 동시에 수정이 가능함

하지만!!!

let copy = [...글제목]

이렇게 넣어주어야 제대로 작동이 된다.

이유는 ??

state 변경함수 특징.

1. 기존 state 의 데이터 == 신규 state 의 데이터

인 경우에 변경을 안해준다

2. array/object 의 경우 동작방식이 특이한데

어떠한 array 나 object 의 변수를 선언하고 데이터를 넣는다고 하는 식을 보자

ex)

let arr = [1,2,3]; 이라고 했을때 arr 에 배열을 넣는게 아니라 arr은 배열의 주소를 가르치는 주소저장값이다.

즉 [1,2,3]과 같은 배열이나 object 의 경우 ram 에 저장이 되고

변수 arr 은 그 배열이나 object 의 위치를 가르키는 주소역할이다.

아까 들었던 예시를 다시한번 살펴보자

기존의 선언된 변수가 있고

그 변수의 값을 하나 변경한 신규 변수가 있는데

useState의 경우 기존의 데이터와 신규 데이터의 값이 같으면 변경을 안해준다

어?! 0번째 어레이가 바뀐거 맞잖아요! 값이 같지 않잔아요!!!!!!

라고 의문이 들 수 있는데 위에서 말했듯이 주소 역할(주소는 같음)만 하기 때문에 같은 데이터로 판단한다.

기존의 원본값을 보존하기위해 copy 본을 만들어서 array 주소값을 넣은 경우에도

마찬가지로 copy 에 담겨진것은 주소값이고 그 역시 기존의 변수값과 차이가 없기에

useState 에서 같은 값으로 판단하고 변화하지 않는다

array와 obejct 는 reference data type 이라서 그렇다 즉 [참조형 데이터 타잎]

그러면 왜 let copy = [...글제목]; 은 useState 가 반응할까?

... 은 괄호를 벗겨주세요 라는 의미인데 이를 통해 새로운 화살표를 선언한다고 볼 수 있다.

그리고 다시 [] 를 씌우니까 새로운 화살표로 인식되고 그 인식을 useState 에서 반영해

변경된 데이터 값이 화면에도 표시된다.

간단하게 말하면

state가 array/object 면 새로운 복사본으로 만들어 수정해야한다.

(... 을 이용해라!)

출처 : 코딩애플 React 강의 3~5강 입니다.

https://codingapple.com/ 알아야할 핵심내용을 쉽게 설명해주시는 강의 같습니다.