코딩애플 - 무작정 React 찍먹하기 -2- (JSX 사용법 or state변수 사용)
여기서는 코딩애플의 2강, 3강을 묶은 내용을 작성한다.
우선 해당 프로젝트를 웹으로 실행 시키는 npm start를 터미널에 입력 해 주고 결과를 보자.
에러가 난다면 C:\Users\miwog\Videos\개발자\copy> 해당 명령어를 입력하는 폴더가 제대로 지정되었는지 확인 해야한다.
한번 상위폴더에서 실행 시켜서 에러가 떳었음 ;;.. errno -4058
실행 시키면 기본적으로 코딩되어있는 화면들이 나온다.
해당 화면이 그려져 있는 곳은 App.js 이다. App.js도 일종의 자바스크립트 파일이므로 Js의 문법에 맞춰서 작성해야 한다.
기본적으로 코딩되어있는 내용들을 지워 주도록 한다.
필요없는것을 위의 사진처럼 지워주고 이제 div태그 안에 코딩을 시작하면 된다...!(지우고 다시 실행해보면 위의 실행 결과와 달라져 있는 것을 알 수 있다.)
이제 해당 공간안에 아무거나 적어보고 결과를 보자.
해당 div안에 잡다한 문자를 썻다. 결과는?
작성한대로 해당 상단의 공간에 문자열이 나오는 것을 볼 수 있다. 한마디로 그냥 저안에 기존에 html쓰듯 div를 만들어 코드를 작성해 주면된다.
여기서 왜 App.js에 작성하면 저절로 화면에 띄워지는지가 궁금할 수가있는데. App.js가 메인페이지로 작동하는 원리는 아래와 같다.
index.js 라는 곳의 소스를 확인해 보면 7번째 라인에 id가 root인 div 태그를 다 public에 있는 index.html로 가져와 달라고 작성 되어있다.
그러면 이제 코드를 작성 해 보자. 뭐 별다른거 없고 윗윗 그림에서 App이라는 함수안의 리턴까지는 일반적인 JS함수문법인데, 안에 쌩으로 HTML을 작성하는 것은 좀 다르긴 한데.. 그냥 그 리턴안에 HTML코드 작성 하는 것을 JSX문법 이라고 한다. HTML처럼 생긴 JSX라고 생각하면 될듯...
이제 기본적인 블로그 느낌의 navbar를 제작 해 보자.
JSX에서는 div속성에 class를 주고싶으면 className="클래스명" 이라고 부여를 해 줘야 된다. 리턴안에 class를 쓰면 JS의 문법과 겹치기때문에 클래스네임으로 선언을 해줘야 한다. navbar div는 위에서 작성했으니 navbar를 디자인하는 css를 작성해 보자.
line7~15
navbar가 꾸며졌다.~ 글씨는 black-nav div안에 div하나를 더만들어서 작성했다~.. 근데 이렇게 할꺼면 그냥 쌩HTML이랑 별반 차이가 없어 보이는데 왜 리액트를 쓰는지 의문인데.. 이것은 리액트는 데이터 바인딩을 쉽게 할수있어서 쓰는 것인데.. 왜 쉽다는건지 한번 알아보자!!!...~
예를 들어 line 13 해당 코드처럼 블로그 글이 있다고 생각을 해보자.. 블로그 글은 맨날 바뀐다고 가정을 해 보자..? 매일 server에서 다른 데이터를 가지고 온다는 가정하에 line 6 과 동일하게 '강남 고기 맛집'을 서버에서 가지고 온 데이터 라고 치면 저 해당 변수를 line 13으로 넣어주는 행위를 매일 해야한다. 그런 행위를 실제로 프론트앤드 개발자들이 매일 한다. 이 행위를 데이터 바인딩이라고 한다. (데이터를 -> HTML에 꽂아넣는 것)
전통적인 자바스크립트 문법으로 데이터 바인딩을 한다면,
document.getElementById().innerHTML = ''?이런 형식으로 line 7에 삽입이 될 것이다. 하지만 리액트에서는 이런 과정이 조금 더 쉽다. JSX문법을 이용해서 다음과 같이 해주면 된다.
line 13에 적힌것과 같이 데이터 바인딩을 쉽게 서버에서 가져온 데이터를 담은 변수를 h4태그에 {변수명}을 넣어주면 해당 데이터가 바로 들어오게 된다!!!.. oh!.. 데이터 바인딩이 아주 간단해진다. 그래서 리액트, 앵귤러, 뷰를 사용한다.
function 또한 해당 방법으로 쉽게 넣을 수 있다. (line 7~9, 16)
중괄호 안에는 {변수명, 함수 등} 이렇게 쓰면 된다는 것이다!!.. good 또한 만약에 line 14와 15 사이에 이미지를 넣고 싶다고 할때 아래처럼 넣을 수도 있긴 한데..?
<img src="logo.jpg" />보통 상황에서 내가 이미지를 넣고싶다 할때 위의 사진에 line1번의 경우처럼 갖고오고 싶은 이미지를 import 한 후에
import 해온 line 1번의 변수 logo를
<img src= {logo}/>이런식으로 많이 사용한다!!.. 한마디로 src, id, href 등의 속성에서도 {변수명, 함수 등}으로 쉽게 바인딩이 가능 하다는 것이다.
document.getElementById().src=어쩌고 저쩌고이 것을 쌩 JS로 작성 했으면 위의 코드처럼 뭐가 많이 붙었을꺼다. 훨씬 쉽게 데이터 바인딩이 된다는 뜻이다..
클래스 명같은 곳에도 중괄호로 변수를 집어 넣을 수도 있으며, 상상하는 모든곳에 {}로 변수를 집어넣기가 가능하다..
이 것을 가장 중요한 JSX의 두번째 문법이라고 보면 되겠다. {}{}{}{{}{}{}{}{} 이거 까먹으면 안된다아아아!
이런 이유로 리액트를 사용한다고 보면 되겠다!.
세번째는 JSX에서 style 속성을 집어 넣고싶다 할때
<div style="font-size : 16px">개발 Blog</div>보통은 JS에서 사용할땐 이런 식으로 스타일 속성을 삽입했을 텐데.. JSX에서는 이렇게 하면
연막탄 화면에 슬픔을 맛볼 수 있다. 크롬 개발자 도구 콘솔에 바로바로 에러가 뜬다~.. ㅇㅇ;;
이유가 뭐냐면 JS에서 사용되는 민감한 기호들이 많아서 그렇다. 그냥 쓰면 안되고 오브젝트 형식으로 넣어 줘야한다.
<div style={ { color : 'blue', fontSize : '30px' } }> 개발 Blog </div>위의 코드처럼 JSX에서 style은 무조건 중괄호가 들어가야 하고 그 안에 object 형식 데이터로 만들어서 삽입해 주면 정상적으로 속성값이 들어간다. 이렇게 펼쳐서 각개전투하기 귀찮으니까 className으로 한번에 묶어서 css에서 처리한다고 생각하면 이해가 쉬울 것이다!!.
그러면 이건 될까 과연?
line 8번 처럼 변수안에 넣은 후 line 13번 스타일 속성에 중괄호로 넣어준 모습이다...
당연히 정상적으로 실행된다!.. 앞서 말했듯.. 상상하는 모든곳에 중괄호를 적용 할 수 있는 모습이다!..
여기서 JSX 핵심을 요약 후 state로 넘어가자!
JSX 기본 문법
1. JSX에서는 div속성에 class를 주고싶으면 className="클래스명" 이라고 부여를 해 줘야 된다.
2. JSX에서는 데이터 바인딩을 중괄호 {변수명, 함수 등}으로 쉽게 할 수 있다.
3. JSX에서 style속성을 집어 넣을때는 style={ object 자료형으로 만든 스타일} 형식으로 넣어 줘야한다.
한번 더 확인 할것!.
errno -4058 : 사건 개요.. npm start 시에 err가 났다.
해결 : 터미널에 실행시키기 전 현재 해당 터미널의 위치가 틀렸다. (하위폴더로 한칸 더 이동을 해서 실행)
다음으로 블로그 navbar를 만들었으니 블로그 글 목록을 만들어 보자.
App.js에서 line 12~16과 같이 작성 해주고 App.css에서 line 16~ 21 처럼 작성을 해주면
이런 결과물이 나온다~.. 현재는 데이터를 posts라는 변수에다가 저장을 했는데, 변수 말고 데이터를 저장 할 수 있는 또하나의 방법을 알아 보자!. 바로 state라는 리액트 문법에 대해 알아 볼 것이다. 우리들의 사이트의 데이터를 보관 할때의 방법이 두가지가 있는 것이다.
데이터는
1. 변수에 넣거나
2. state에 넣거나 <- 이것을 알아보도록 하자.
import React, { useState } from 'react';
useState('남자 코트 추천'); [a,b]
let [a,b] = useState('남자 코트 추천');
var [a,b] = [10, 100];
let [a,b] = useState(['남자 코트 추천', '강남 우동 맛집']);첫째 줄에 해당 코드처럼 작성을 해주면 리액트에 있는 내장 함수 useState를 쓰겠다고 선언 한 것이다.
둘째 줄처럼 작성 하면 state라는 것을 만드는 코드이다. 해당 state를 선언하면 자동적으로 Array [a,b]가 생성된다.
무슨 말인가 하면 a에는 '남자 코트 추천' 이라는 데이터가 들어가고, b는 해당 데이터를 수정해주는 함수가 생성 된다..
그래서 만들어진 useState는 어떻게 사용되냐 하면
셋째 줄처럼 사용 하는 것인데, let [a,b] 변수를 만들 것인데, useState에서 만들어진 a,랑 b를 각각 집어 넣어주세요 라는 뜻이고, 해당 방법은 자바스크립트 ES6의 destructuring이라는 신 문법이다. 해당 문법을 어떻게 쓰는지 간단한 예시를 들어보자면,
넷째 줄처럼 10과 100을 담고 있는 array가 존재 할때 안에 있는 데이터를 각각 변수에 담고싶을때 해당 코드처럼 작성해주면 var a = 10, var b = 100이 된다.
다섯째 줄처럼 글자말고도 array형식이나 object형식으로도 저장이 가능하다.
소스안에 적용을 시켜보자.
조금 더 명확한 변수명을 사용해서 저장 후 array형식의 데이터를 넣어 주고 실행을 했을때 array를 글자로 바꿔준 형태로 나오게 된다. array중에 '남자 코트 추천' 을 뽑겠다 하면 line 16번에 아래의 형태로 넣어 주면 되겠다.
<h3> { 글제목[0] } </h3>이런 식으로 데이터를 저장 해서 사용할 수 있다.
정리 하자면
1.useState()를 이용한 생성
2. 문자, 숫자, array, object 다 저장이 가능하다.
그런데 의문점이 드는게 그냥 변수를 쓰면되는거 아닌가 왜굳이 state를 만들어 씁니까?.. 에 대한 답변은..
React를 웹이 App처럼 동작하게 만들고 싶어서 state에 데이터를 저장한다.
line 16에 그냥 변수로 만들어 놓은 posts를 선언하고 line 9에 데이터를 바꿔주면 자동 재렌더링이 안되고 새로고침이 되어야 재렌더링이 된다.
line 7에 해당하는 데이터를 변경 해보면 HTML이 자동으로 재렌더링이 되는 것을 확인 할 수 있다.
=HTML이 새로고침 없이도 스무스하게 변경된다.
그러면 모든것을 다 state로 저장해서 쓰면될까?... line 13에 블로그 제목도 state로 저장해서 써도될까?.. 된다.. 하지만 블로그 제목이 수시로 바뀌거나 하지않기 때문에 일반 변수나 하드 코딩 해도 전혀 상관이 없다.
자주 바뀌는, 중요한 데이터는 변수 아닌 state로 저장해서 쓰도록 하자!. 이런 기준에 따라 자의로 판단해서 state, 변수를 적절하게 사용하도록 하자.