리액트 찍먹 2

 

찍먹 과정인 만큼 리액트로 간단하게 블로그 UI를 구성 했다!

 

1. navbar 생성

import './App.css';
 
function App() {
  return (
    <div className="App">
      <div className="black-nav">
        <div className='title'>vellalog</div>
        <div className='profile'>profile</div>
      </div>
    </div>
  );
}
 
export default App;

 

.App {
  text-align: center;
}

body {
  font-family: 'nanumsquare';
}

.black-nav {
  width: 100%;
  display: flex;
  background: black;
  color: white;
  padding: 20px;
  font-size: 20px;
  font-weight: 600;
}

.title {
  padding-left: 50px;
}

.profile {
 padding-right: 70px;
 position: absolute;
 right: 0;
}

차례대로 App.js와 App.css

App.js의 필요없는 부분을 모두 삭제하고 네이게이션 bar만 간단히 생성했다. (정말 구색용 ㅎㅎ..)

class 대신 className을 사용할 것! 자동완성 덕분에 헷갈릴 일은 없다.

 

pc ver

 

mobile ver

반응형도 잘 적용 되었다!

 

 

2. 제목과 내용을 보여주는 List - state로 변수 만들기

만들어진 모습

 

import React, { useState } from 'react';
import './App.css';
 
function App() {
  let [titles, willUpdateTitle] = useState(['블로그 만들기', '리액트다아', '호롤롤롤']);
 
  return (
    <div className="App">
      <div className="black-nav">
        <div className='title'>vellalog</div>
        <div className='profile'>profile</div>
      </div>
      
      <div className='list'>
        <h3>{ titles[0] }</h3> 
        <p>홀홀홀...</p>
        <hr/>
        <h3>{ titles[1] }</h3> 
        <p>홀홀홀...</p>
        <hr/>
        <h3>{ titles[2] }</h3> 
        <p>홀홀홀...</p>
        <hr/>
      </div>
    </div>
  );
}
 
export default App;

state로 제목 데이터를 저장했다. App() 함수의 return 위에 작성해주면 된다. state를 사용하려면 js 파일 최상단에 꼭 import React, { useState } from 'react'; 를 입력 해주어야 한다.

 

   let [titles, willUpdateTitle] = useState(['블로그 만들기', '리액트다아', '호롤롤롤']);

 

state 데이터를 생성할 땐 대괄호 안에 변수를 담을 변수명(titles)과 그 변수를 수정할 때 쓰일 함수(willUpdateTitle)이 있어야한다. state로 생성된 변수는  tiltes[0] = '불고기 만들기';  처럼 직접 수정할 수 없다. 무조건 생성될 때 선언한 함수를 이용해 데이터에 접근해야만 수정할 수 있다.

👀 state를 사용하는 이유는 웹 App처럼 동작하게 하기 위함이다. 리액트의 가장 큰 특징과 사용하는 이유가 새로고침 없이 부드럽게 웹이 작동하기 때문인데, state 데이터가 바뀐다면 HTML이 새로고침 없이도 자동으로 재렌더링 되기 때문에 state를 사용하게 된다.

리액트에서 데이터 바인딩을 하는 방법은 중괄호 { } 안에 변수명을 넣어주면 된다.

 

.list {
  text-align: left;
  margin-top: 30px;
  padding-left: 70px;
  padding-right: 70px;
}

적용된 css

 

 

3. state 데이터 수정하기

1. 버튼 누르면 제목 바꾸기

'불고기' 버튼을 누르면 제목 '블로그 만들기'가 '불고기 만들기'로 변경된다.

 

import React, { useState } from 'react';
import './App.css';
 
function App() {
  let [titles, willUpdateTitle] = useState(['블로그 만들기', '리액트다아', '호롤롤롤']);
 
  function updateTitle(bulgogi) {
    var newTitles = [...titles]; //Deep Copy
    newTitles[0] = '불고기 만들기';
    willUpdateTitle(newTitles);
  }  
 
  return (
    <div className="App">
      <div className="black-nav">
        <div className='title'>vellalog</div>
        <div className='profile'>profile</div>
      </div>
 
      <div className='btnDiv'>
        <button className='updateTitleBtn' onClick={ updateTitle }>불고기</button>
      </div>
      
      <div className='list'>
        <h3>{ titles[0] }
        </h3> 
        <p>홀홀홀...</p>
        <hr/>
        <h3>{ titles[1] }</h3> 
        <p>홀홀홀...</p>
        <hr/>
        <h3>{ titles[2] }</h3> 
        <p>홀홀홀...</p>
        <hr/>
      </div>
    </div>
  );
}
 
export default App;

 

.btnDiv {
  text-align: left;
  padding-left: 70px;
  padding-right: 70px;
  margin-top: 30px;
}
 
.updateTitleBtn {
  border: 1px solid rgba(55, 53, 47, 0.16);
  border-radius: 15px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: rgba(55, 53, 47, 0.65);
  padding: 5px 10px 6px 10px;
  /* margin-left: 5px; */
}
 
.updateTitleBtn:hover {
  background: #eee;
}

작성된 코드와 css

 

 

버튼을 누르면 제목이 수정 되기 위해 위와 같이 updateTitle()이라는 함수를 생성해주었다. state 데이터를 수정하기 위해선

1. 기본 state 카피본을 만든다
2. 카피본에 수정사항을 반영한다.
3. 변경함수()에 집어 넣는다.

이 세가지 과정을 기억하면 된다. 리액트 대원칙 immutable data에 의해 데이터 원본을 직접 수정할 수 없다. 기존의 state를 카피 할 때의 주의점도 있는데 만약 

var newTitles = titles;

이렇게 선언한다면 복사가 아니라 값 공유가 되어버린다. (reference data type의 특징이라는데 공부해보기로...) 때문에 Deep Copy를 해주어야 하는데 ES6의 새로운 문법인 Spread Opertor, 대괄호 [ ]  안에 온점 세 개 ... 와 state 변수명을 적어주면 된다.

위와 같은 방법으로 함수를 작성하여 '불고기' 버튼의 onClick 이벤트에 updateTitle() 함수를 넣어줬다.(리액트의 onClick은 꼭 C를 대문자로 써줘야한다!) 리액트에서의 데이터 바인딩은 중괄호 { }를 사용하기 때문에 함수도 중괄호 안에 넣어주면 된다. 중괄호 안에 함수를 넣을 때 소괄호를 함께 넣으면 클릭시 이벤트가 실행 되는 것이 아니라 바로 실행 되기 때문에 꼭 소괄호 ( ) 없이 넣어줘야 한다!

 

2. 가나다 순으로 제목 정렬하기

state 함수 사용의 살짝 응용된 버전으로 버튼을 누르면 가나다 순으로 제목이 정렬되게끔 해보자.

import React, { useState } from 'react';
import './App.css';
 
function App() {
  let [titles, willUpdateTitle] = useState(['블로그 만들기', '리액트다아', '호롤롤롤']);
  
  //생략
 
  function sort() {
    var newTitles = [...titles];
    newTitles = newTitles.sort(); 
    willUpdateTitle(newTitles);
  }
 
  return (
    <div className="App">
      {/* 생략 */}
 
      <div className='btnDiv'>
        <button className='sortBtn' onClick={ sort }>가나다 ⬇</button>
        <button className='updateTitleBtn' onClick={ updateTitle }>불고기</button>
      </div>
      
      {/* 생략 */}
 
    </div>
  );
}
 
export default App;

state 데이터 수정 원칙에 따라 제목을 Deep Copy 하고 카피한 state를 저장한 변수는 배열이니 sort() 함수를 이용해 정렬 시켜주었다. 수정 함수에 수정이 반영된 변수를 넣어주고 버튼 onClick 이벤트에 함수를 넣어주면 끝!

 

😀 정렬 되는 모습

 

3. 좋아요 버튼 기능

앞서 해본 데이터 수정보다 훨씬 쉬운 기능이다. 근데 이제 찐 좋아요 기능이면 안 쉽겠지...

let [count, willUpdateCount] = useState(0);

좋아요 숫자를 저장할 state 데이터를 생성 해주고 기본값은 0으로 지정한다.

 

{/* 생략 */}
 
<h3>
    { titles[0] }
    <span className='heart' onClick={()=>{ willUpdateCount(count+1) }}>❤︎ 공감</span>
    <span className='heartCount'>{count}</span>
</h3> 
 
{/* 생략 */}

그리고 onClick 이벤트를 걸어 state 데이터 수정 함수인 willUpdateCount()에 누를 때마다 +1이 되도록 작성했다.

 

 🎊 완성

프로젝트할 때 Ajax로 스크랩 기능 구현 했었는데 화면 깜빡임 없이 이렇게나 부드럽게 카운트가 올라가다니.. 신기해서 몇 번을 광클 했다 ㅋㅋㅋ 자바스크립트와 HTML, CSS 치던 짬(ㄷㄷ)이 있으니 즐겁게 빠르게 익힐 수 있을 것 같다! 

 

썸네일

---

코딩애플 무료 리액트 강의를 보며 정리한 내용입니다.

 

• https://youtu.be/FqnAFX9lQPQ
• https://youtu.be/Qb8Oiy8i9IY
• https://youtu.be/Br9fKSIeAok