React || Part1 블로그 제작 및 기초 문법_02

버튼기능활용 & state 변경하는 법

 클릭을 하였을 때 숫자가 올라가는 것을 예시를 통해 배워보려 한다.

 

<h4> 리액트음식점 <span onClick={??}> 좋아요</span> {good} </h4>

 

<span> 태그를 클릭을 하였을 때 좋아요 오른쪽에 숫자가 올라가게 해보고 싶다.

 

import { useState } from "react";

 

let [good, setGood] = useState(0);

 

위 조건을 구성하기 위해선 함수를 써야 하므로

 

function Good() { setGood(good + 1); }

 

 

이렇게 구성하여 젤 위에 코드?? 자리에 Good을 넣으면 클릭할 때마다 숫자가 올라가는 것을 볼 수 있다.

 

여기서 그냥 넘어가면 안 되는 부분이 있다.

 

state는 state변경함수를 써서 state를 변경해야 한다!

>> 아니면 html 재렌더링이 안된다!

>> 더 쉽게 얘기하면 그냥 안 바뀐다!

 

물론 onClick 뒤에 () => {setGood(good + 1)} 이런 식으로 넣어줘도 되지만, 각자 맞는 스타일에 해보는 걸로!

 

import { useState } from "react";

let [practice, setPractice] = useState([

"남자 코트 추천",

"강남 우동 맛집",

"파이썬 독학",

]);

<button>클릭시 배열 바꿔보기</button>

<div className="blakc-nav">

<h4>ReactBlog</h4>

</div>

<div className="list">

<h4> {practice[0]}

<span> 좋아요</span>

</h4>

 

이 상태에서 practiec 배열에서 '남자 코트 추천'을 '여자 코트 추천'으로 바꿔보려고 한다.

클릭하였을 때 효과를 주기 위해 버튼 하나 만들고, onclick 시 바뀌게 해 보았다.

<button

onClick={() => {

let copy = [...practice];

copy[0] = '여자 코트 추천';

setPractice(copy);

}}

>

 

사실 처음엔 [...practice] 이렇게 적지 않고, 그냥 practice라고 적었었는데, 

그렇게 해버리니 바뀌지 않는 문제가 생겨버렸다..

 

State 변경함수의 동작원리

결론은 제일 위에 정의해 놓은 practice와 아래의 copy가 == 상황이 되어버리면(같은 자료이면) state변경이 되지 않는다.

 

이걸 알려면 reference data type을 알아야 하는데 이건 아래쪽 가서 다시 다뤄보고 , 쉽게 이해해 보자면

배열을 변수로 지정하면, 저장된 위치만 나타내는 것이기 때문에... 해서 원래 배열의 괄호를 벗기고, 다시 []을 써서 객체형태로 유지하면서 새로운 array로 인식한다. 그러므로 객체를 복사하거나 할 땐 저렇게 써야 한다.

 

reference data type이라고 하는데 이게 뭐지?

자료형에는 Primitive data type(기본)과 reference type(참조) 두 가지가 있다.

 

Primitive data type

 : 기본 타입 int, double 변수에 값이 들어가는 타입이다.

 : 논리형, 정수형, 실수형, 문자형 이런 타입이라서 가지는 메모리가 크지 않다.

 : 기본 타입의 크기가 작고 고정적이기 때문에 메모리의 stack에 저장됨

 

 

reference type

 : new 키워드를 이용하여 객체를 생성하여 데이터가 생성된 주소를 참조하는 타입이다.

 : array, class, interface, enum과 같은 타입이 있다.

 : 참조 타입의 데이터의 크기가 가변적, 동적이기 때문에 동적으로 관리되는 Heap 영역에 저장된다.

 

[출처] 기본(Primitive) data type과 참조(Reference) data type |작성자 minjara

 

 

 

다른 예제) 버튼을 눌렀을 때 현재 배열을 가다나 순으로 바꿔본다면??

 

<button onClick={() => {

let copy = [...practice];

copy.sort();

setPractice(copy);

}}

>

글자순으로 배열하기

</button>

sort라는 것은 처음 알았다...(구글링의 중요성)

다른 것은 뭐 위에랑 동일해서 크게 어렵지 않았다.

 

 

(참고) 터미널 / 브라우저 콘솔창에 warning이 뜨는 이유

개발하다 보면 에러메시지는 터미널이나 브라우저 개발자도구에 뜬다고 했는데
간혹 노란색 warning 메시지가 등장하는 경우가 있다.
빨간 error는 해결해야 하지만 warning은 무시해도 된다.

 

이렇게 계속 뜨는 게 싫다면

/*eslint-disable*/

이라는 주석을 js 파일 최상단에 추가해 주면 eslint 기능을 잠시 끌 수 있다. 

 

 

Component 문법

 앞에서 배웠지만, return() 안에는 div가 병렬로 들어가면 안 된다.

 

그래서 불가피하게 

 

return(

<div>

   <div></div>

   <div></div>

</div>

)

이런 식으로 불가피하게 div가 많아지는 경우가 있는데 

 

긴 HTML을 한 단어로 치환해서 넣을 수 있는 문법이 Component이다.

 

위 함수와 다르게 새로운 함수를 만들어 표현이 가능하다.

 

function Modal() {

return (

<div className="modal">

<h4>제목</h4>

<p>날짜</p>

<p>상세내용</p>

</div>

);

}

이렇게 작성 후 위 함수에

<div>

     <Modal></Modal>

</div>

 

이렇게 넣으면 Modal 함수 안에 있는 요소들이 <Modal></Modal> 안에 들어간다.

 

Component 사용할 때 주의점

 : 작명 시 영어 대문자로 보통 작명

 : return() 안에 html 태그들이 평행하게 여러 개 들어갈 수 없음

 : function App() 안에 생성하면 안 된다 >> component 안에 component를 만들지 않는다.

 : 함수 만들 때 화살표 함수도 물론 가능

 

언제 Component를 쓰면 좋을까??

 : 사이트에서 반복해서 출현하는 HTML 요소들

 : 내용이 자주 변경될 거 같은 HTML요소

 : 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나로 담고 싶을 때

 

 

React 환경에서 동적인 UI 만드는 법

 step1. html, css로 미리 UI디자인하고,

 step2. UI의 현재 상태를 state로 저장

 stpe3. state에 따라서 UI가 어떻게 보일지 작성

 

 

 step2. UI의 현재 상태를 state로 저장

  app function 안에

 let [modal, setModal] = useState()로 저장

 

 stpe3. state에 따라서 UI가 어떻게 보일지 작성

 {

   if (조건식) {

          <modal></modal>

}

}

 

하지만 {} 안에 if문을 쓸 수 없고, 삼항연산자를 이용해 JSX 중괄호 안에서 사용가능하다.

 

삼항연산자란?

 - 조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy) 일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy) 일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if…else문의 대체재로 빈번히 사용됩니다.

[출처]https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_operator

 

버튼을 하나 만들어 글제목을 클릭하면 숨겨진 modal창을 보여주게 하려면??

 

<div>

<button

onClick={() => {

setModal(true);

}}

>

modal창보이기

</button>

{modal == true ? <Modal></Modal> : null}

</div>

 

그럼 반대로 버튼을 눌렀을 때 켜져 있는 모달창을 없애고 싶다면??

 

<div>

<button onClick={ ()=>{ setModal(true) } }> {글제목[0]} </button>

{

modal == true ? <Modal></Modal> : null

}

</div>

 

이런 형식으로 쓰면 된다.

 

실습을 하면서 정말 아직 코드 짜는 게 힘들다..
자주 만져보고 자주 해봐야 늘 텐데..

해보자..