[ 코딩애플 ] React 리액트 기초부터 쇼핑몰 프로젝트까지! part.1

안영우·2020년 11월 25일
React코딩애플

[ 코딩애플 ]

목록 보기
1/5

✏️ 서론

스파르타코딩클럽이 끝나고 나서 어떤기술을 공부해볼까 하다 튜터님께서 중요하다고 강조하신 React를 공부하기로 했다. 현업에서 많이쓰이고 있고 Javascript기반의 프레임워크이기때문에 배우기 쉬울거라 생각했다. 그런데, React문법을 배우니 아직까진 어렵다고 느낀다. 😅 열심히 하다보면 터득할 날이 오겠지!

React 리액트 기초부터 쇼핑몰 프로젝트까지!

강의는 코딩애플에서 듣고있고 React를 이용하여 쇼핑몰까지 만든다고 하는데 한번 들어보려고한다!

✏️ 본론

이번시간과 다음시간은 React의 간단한 기초문법과 블로그 제작을 작성하고자 한다.

강의를 들으면서 느낀점은 방대한 문법을 알려주시는게 아니라 필요한 문법들 (useState, deepCopy)만 알려주셔서 좋았다.
여기에 내가 공부하고 싶은 문법을 더한다면 금상첨화지 않을까..

📍 React란?

Javascript 라이브러리의 하나로서 사용자 인터페이스(UI)를 만들기 위해 사용된다.
facebook에서 개발했으며 싱글페이지 애플리케이션이나 모바일 애플리케이션개발시 주로 사용한다.
쉽게 말해 SNS나 APP에서 주로 만드는데 요즘은 Web페이지를 App처럼 만든다고한다.

출처:
나무위키

이러한 기술을 Web-App이라고 부르는데 React, Angular, Vue등이 대표적인 플랫폼이다.
우리가 자주 사용하는 Instagram, Twitter, Vibe, Flipkart을 떠올릴 수 있다.

대표적인 특징은 스무스하게 동작 한다.
정확히 말하면 다른페이지로 넘어가거나, 포스팅을 발행할때 새로고침을 하지않아도 된다.
지금 뉴스! 프로젝트를 진행할때 제일 불편했던 점은 겪어본 개발자들은 알겠지만 쌩 HTML, CSS, Javascript를 바탕으로 CRUD기능을 구현하면 새로고침이 필수였다. 🥲
React는 새로고침을 하지않아도 재렌더링을 해준다.
(이래서 신기술을 배우는 구나)

요즘은 스타트업, 중소기업, 대기업이든 사이트를 새로 만들때 Web-App을 많이 사용한다.
그 이유는 다음과 같다.
1. UX가 뛰어나서 좋은 사용자경험을 제공한다
2. HTML관리가 편해진다.
3. 구매전환율도 높아진다.
4. React문법으로 iOS/Android 모바일 앱 제작도 가능하다
5. 서버개발자가 편해진다.

이는 React, Angular, Vue 라이브러리를 사용하면 훨씬 짧고 간결한 코드로 개발이 가능하다.
이게 중요하다. 짧고 간결한 코드

장점도 많은데 단점은 없을까?
있다. 문법이 어렵다.
편리하고 많은 장점을 누리기 위해서는 문법이라는 벽을 깨야한다. 지금부터 시작해보자.

📍 JSX문법

React를 공부하면서 JSX문법은 처음들어본다. JSX는 뭘까?
JavaScript 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 React 기본 내장 문법이다.

1. class 선언

대표적으로 두드러지는 문법은 class인데, React에서는 class라는 키워드를 사용할 수는 없고 대신 className이라고 사용해야한다. className="black-nav" 처럼말이다.
JavaScript의 영향을 받아서인지 네이밍 또한 camelCase를 사용해야한다.
(camelCase가 무엇인지 궁금하면 내 블로그 참고)

2. Data-Binding

Data-Binding은 JavaScript 데이터를 HTML에 넣는 작업을 뜻한다.
Front-end, Web-App 개발 시 Data-Binding할 작업이 많은데 React는 이걸 매우 쉽게 구현 할 수 있다.

JavaScript의 전통적인 방식인 

document.getElementById().innerHTML=' '

을 선언하지 않아도 된다.

대신, 예를들어

function App() {
  
  let data = '안녕하세요!';
  return (
    <div className="App">
    	<div className="black-nav">
    		<div>영우의 개발 Blog</div>
    		<div> { data } </div>
	</div>
    </div>

이런식으로 중간에 {중괄호}를 사용하면 변수로 선언한 내용을 넣을 수 있다.
href, id, className, src 등 여러가지 HTML 속성들에도 Data-binding이 가능하다.

HTML 중 style속성은 {속성명: 속성값}를 사용하여 오브젝트로 바꿔서 넣어야한다.
속성명에 -(대쉬) 기호를 사용할 수 없다. 대신, camelCase로 치환해줘야한다.

<div style = { {color: 'blue', fontSize: '30px'} }> 글씨 </div>

이렇게 일일이 style 속성에 선언하면 번거로우니까 위에 style={변수명}으로 넣거나,
CSS파일에 class를 만들어 사용하도록 하자!

let postTitle= {color: 'red', fontSize: '50px'}
<div style = { postTitle }> 글씨연습 </div>

3. useState

useState를 사용하기 위해서는 두 줄의 코드가 추가되어야한다.

import React, { useState } from 'react';
let [a,b] = useState('동탄 맛집 추천');

첫번째 코드는 useState를 import시키는 코드이다.
이게 있어야 useState를 선언 할 수 있다.

두번째는 사용예제인데, 자세히 살펴보자 data는 [데이터1, 데이터2] 을 사용한 array다.
a 변수는 실제 저장 할 데이터가 들어있고, b 변수는 저장할 데이터를 변경시킬 함수가 들어있다.

useState 사용배경에는 ES6 destructuring 문법이 사용되는데
간단하게 요약하면, 내 array안에 들어있는 데이터들을 변수로 쉽게 저장 할때 사용되는 신문법이다.

예를 들어보자.
구문법에서 AN과 26을 변수로 저장하려면
기존에 다음과 같은 과정을 거쳤다.

// person array형 선언
let person = ['AN', 26];
let name = array[0];
let age = array[1];

하지만, ES6 문법을 적용하면 다음과 같이 표현이 가능하다.

let [name, age] = ['AN', 26];

귀찮게 등호를 사용하지 않아도 왼쪽과 오른쪽 형식을 똑같이 맞춰주면 알아서 변수가 생성된다.
성공적인 React사용을 위해 알아두자,

이처럼 useState를 사용하여 {중괄호}를 사용하면 원하는 곳에 Data-binding이 가능하다.

let [글제목, 글제목변경] = useState('동탄 맛집 추천');
<h3> { 글제목 } </h3>

을 사용하면 <h3> 동탄 맛집 추천 </h3>으로 렌더링된다.

그렇다면, 왜 변수를 사용하지않고 state에 저장할까?
변수가 변경될때 자동으로 관련된 HTML을 재 렌더링하게 만들기 때문이다.
그러니까, 새로고침하지 않아도 재렌더링해준다는 얘기이다.

왜 새로고침을 하지 않아도 되는지 궁금하면..!
React를 사용하지 않고 프로젝트를 한번 만들어본 개발자분들은 온 몸으로 느낄 수 있을 것이다. 🤩 🤩

여러가지 장점들 덕분에, state에는 중요한 데이터들을 저장해 사용하면 편리하다. (상품명, 글제목, 가격 등등)

그렇다면, 예제를 풀어보면서 감을 익혀보자

[ 예제1 ] useState를 이용하여 글 제목을 만들어 보세요.

예제를 딱 보고나서 변수에 useState를 선언하고 HTML에 넣으면 되겠다는 생각을 했다.

function App() {
let [글제목, 글제목변경함수] = useState(['남자 헤어 추천', '동탄 맛집 추천', '파이썬 독학 추천']); 
}

return (
<div className="list">
	<h3> {글제목[0]} </h3>
    <p>11월 24일 발행</p>
    <hr/>
</div>
<div className="list">
	<h3> {글제목[1]} </h3>
    <p>11월 24일 발행</p>
    <hr/>
</div>
<div className="list">
	<h3> {글제목[2]} </h3>
    <p>11월 24일 발행</p>
    <hr/>
</div>

다음과 같은 결과가 나왔다.

[ 예제2 ] useState를 이용하여 좋아요/싫어요 기능을 구현해보자.

먼저, emoji를 이용해서 좋아요와 싫어요 모양을 구현했다.(이러니까 App 같아보인다.)
다음에 onClick을 실행하면 좋아요는 +1, 싫어요는 -1을 구현해보자.

JavaScript에서 onClick함수를 구현할때는 다음과 같이 선언했다.

function like(){
  let like = like + 1
}
<div onclick=(like())>👍🏽</div>

하지만, JSX에서는 문법이 살짝 다르다.

<div onClick={실행할 함수}>
  1. camelCase를 사용하고
  2. { 중괄호 }를 사용하고
  3. 중괄호 안에는 함수를 적어야한다.

이렇게 사용 할 수 있다.

// 다른곳에 선언했던 like함수 사용
<div onClick={ like }> 
<div onClick={ function() { 실행 할 코드} }>
<div onClick={ () => {실행 할 코드} }>

마지막에 () => {실행할 코드}는 ES6 신버전 문법이다.
여기서는 function 대신 => 키워드를 사용할 수 있다.

여기서, 사용법은 좋아요함수(대체할 데이터)이다.
좋아요함수(1)은 좋아요의 state 가 1로 변경이되고,
좋아요함수(200)은 좋아요의 state 가 200으로 변경된다.
즉, 좋아요함수 (소괄호) 내에 있는 데이터로 완전히 대체 해준다는게 포인트이다.

그럼 기존 state에 +1을 더한 코드를 짜려면?
다음과 같이 짜면 된다. 싫어요도 마찬가지다.
주의 할 점은, 함수를 밖에 선언하면 무한루프에빠져 Error가 발생한다.

// useState에 변수선언 -> 좋아요와 싫어요의 state는 0으로 변경된다.
let [좋아요, 좋아요함수] = useState(0);
let [싫어요, 싫어요함수] = useState(0);

<div className="list">
        <h3> {글제목[0]} <span onClick={() => { 좋아요함수(좋아요 + 1) }}> 👍🏽 </span> {좋아요}</h3>
        <p>11월 24일 발행</p>
        <hr />
      </div>

<div className="list">
        <h3> {글제목[1]} <span onClick={() => { 싫어요함수(싫어요 - 1) }}> 👎🏾 </span> {싫어요}</h3>
        <p>11월 24일 발행</p>
        <hr />
      </div>

[ 예제3 ] 버튼을 누르면 첫 글 제목이 '여자 코트 추천'으로 바뀌는 기능을 구현해보자.

이 문제는 나름대로 시도를 많이했다.

글제목변경함수를 사용하되, array 특성을 이용해야한다.
글제목[0] = '여자코트추천' 이런것처럼 해당 내용만 변경할 수 없고,
글제목변경함수(새로대체할데이터)를 고민해야했다.

결론적으로 2가지 해결방법이 있는데
우선, 나는 onClick에 값을 넣었다.

<button onClick={() => { 글제목변경함수(['여자코트추천', 글제목[1], 글제목[2]])} }> 버튼클릭 </button>

강의선생님은 함수를 선언했다.
함수적용시 onClick안에는 {제목바꾸기}, (소괄호)는 빼고 선언했다.
(소괄호)를 붙이면 onClick을 하지 않고도 함수가 바로 실행되기때문이다.

function 제목바꾸기(){
  // state를 대체해주는 함수
  글제목변경(['여자 헤어 추천', '동탄 맛집 추천', '파이썬 독학 추천']);
}

return (
<div className="App">
  <div className="black-nav">
    <div>YW's Tech Blog</div>
  </div>

<button onClick={ 제목바꾸기 }> 버튼 </button>

  <div className="list">
    <h3>{글제목[0]}</h3>
    <p>11월 24일 발행</p>
    <hr />
  </div>

  <div className="list">
   <h3>{글제목[1]}</h3>
   <p>11월 24일 발행</p>
   <hr />
  </div>

  <div className="list">
    <h3> {글제목[2]} </h3>
    <p>11월 24일 발행</p>   
    <hr />
  </div>
  </div>
  );
}

개발자스러운 해결책은 다음과 같다.
원본 state가 수정되지 않는선에서, 수정된 [데이터]를 만든다.
이건 안된다.

// 오류 문법: 원본 state 수정
function 제목바꾸기(){
  let newArray = 글제목[0] = '여자 코트 추천';
  글제목변경( newArray );
}

대신, 일종의 skill이 있는데, state의 복사본을 하나 만든다.
state를 변경하기위해서 원본을 수정하는게 아닌,
state를 복사 후 수정하는 행위는 react의 좋은 관습이다.

deep copy를 이용해서 수정하라.
deep copy는 서로 독립적인 값을 가지는 복사

// 오류 문법: state 값 복사가 아닌 값 공유
// reference data type 참고
function 제목바꾸기(){
  let newArray = 글제목;
  newArray[0] = '여자코트 추천';
  글제목변경( newArray );
}

이때, spread Operator(연산자)를 사용하게 되는데
이는 배열이 아닌 개별적인 요소가 나오게끔 해주는 문법이다.
예를들어

let data = [1, 2, 3];
console.log(data) -> [1, 2, 3];
console.log(...data) -> 1 2 3

이런식으로 배열 내 [중괄호, 대괄호]를 제거하고 값을 출력해주는 문법이다.

// 정상 문법: deep copy(서로 독립적인 값을 가지는 복사, object, array 모두 가능)
// ...글제목을 사용해 안에있는 괄호를 제거해주고 newArray에 배열로 재저장함.
// 결론적으로 별개의 array로 저장됨.

function 제목바꾸기(){
  let newArray = [...글제목];
  newArray[0] = '여자코트 추천';
  글제목변경( newArray );
}

결과화면

[ 예제4 ] 버튼을 누르면 글 제목이 오름차순/내림차순으로 정렬하세요.

[ 예제 3 ] 과 비슷한 방식으로 하면 된다.
대신 오름차순은 .sort();
내림차순은 .reverse();을 사용하자.

function 오름차순정렬(){
  let orderTitle = [...글제목];
  orderTitle.sort();
  글제목변경함수( orderTitle );
}

<button onClick={ 오름차순정렬 }> 오름차순 정렬 </button>

function 내림차순정렬(){
  let orderTitle = [...글제목];
  orderTitle.reverse();
  글제목변경함수( orderTitle );
}

<button onClick={ 내림차순정렬 }> 내림차순 정렬 </button>

결론적으로
1. onClick={ 함수 }처럼 이벤트핸들러를 달아서 사용하자.
2. 수정하고 싶은 state는 deep/swallow copy를 생성하자.

✏️ 결론

지금까지 React의 전반적인 개념과, JSX문법, useState를 활용한 예제들을 풀어봤다.
온라인강의와 오프라인강의의 다른점은 공부환경과 자기의지 인것 같다.
오프라인은 옆에서 누군가 가르쳐주고 집중을 할 수 있는 환경이되지만 온라인은 그렇지않다.

온라인으로 들으면서 숙제를 풀다보니까 모르는부분은 답답해서 바로 해답부터 보려고 하는것 같다. 앞으로 숙제는 해답을 보지않고 고민하면서 풀도록 해야겠다.

삽질만이 살길이다.

남은 문법은 다음 편에 작성하겠다.

profile
안영우
YW_Tech
다음 포스트

[ 코딩애플 ] React 리액트 기초부터 쇼핑몰 프로젝트까지! part.1 (두번째이야기)

0개의 댓글