TIL040 React: 기초 & 블로그 만들어보기

Somi·2021년 6월 19일
ReactTIL
0

React

목록 보기
1/11
post-thumbnail
post-custom-banner

1. React란?

  • 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리를 뜻한다. 하나의 단일 url을 가지고 SPA(Single Page Application)로 사이트를 표현하는 것을 가능케하는 프레임워크이다. 요즘 웹들은 앱처럼 하나의 url로 새로고침 없이 작동하는 웹앱의 형태를 띄고 있는데 이것이 가능한 건 리액트 덕분이라는 것!
  • 리액트 컴포넌트 기능: 가독성, 재사용성, 유지보수 용이

✔️ React의 설치

  1. node.js를 설치하는 이유
    create-react-app이라는 라이브러리를 설치하기 위함. 이를 설치하려면 node.js를 설치해야하고, 이를 설치하면 npm이 딸려옴. 이는 라이브러리들을 쉽게 설치할 수 있는 하나의 툴이다.
    이 외에도 npm은 여러 용이한 점이 있다.
  2. 파일 설명
  • App.js는 메인페이지에 들어갈 html 짜는 곳(우리가 실제 코딩을 하는 곳), public/index.html이 메인페이지이다.
  • App.js를 메인페이지에 넣는건 index.js에서 명령하고 있다.
  • node.modules: 수많은 라이브러리를 모은 폴더
  • public: static파일 보관함(이미지, 파비콘 등 동적으로 안바뀌는 것들)
  • src: 소스코드 보관함
  • package.json: 설치한 라이브러리 명, 버전들을 모아둔 목록이다. 수정할 일은 없음

✔️ React의 특징

  1. JSX 문법
  2. Component 기반
  3. Virtual DOM

2. JSX란?

JavaScript Extension... 쉽게 말해 HTML문법을 JS 코드 내부에 쓴것. JS의 확장 버전이고 결국은 이도 JS라는 점...

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.

즉 JSX는 자바스크립트 안에서 HTML 문법을 사용해서 웹을 구성할 수 있게 도와주는 자바스크립트 문법으로 리액트 개발에 엄청난 도움을 주고 있다.

공식문서 링크: https://ko.reactjs.org/docs/introducing-jsx.html

✔️ JSX 사용시 주의할 점

(1) 예약어와 중복되지 않도록 한다.

  • class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다.
  • 마찬가지로 루프문 예약어와 겹치는 for는 htmlFor로 사용한다.

(2) 태그는 항상 닫혀있어야 한다.

  • HTML에서 input이나 br을 사용할 때 태그를 닫지 않는 경우가 있다. 하지만 리액트에서는 반드시 클로징 태그를 써줘야 한다.

(3) 어떤 태그라도 Self-closing tag가 가능하다.

(4) 형제 노드를 작성할 수 없다.

  • 형제 노드를 작성할 수 없기 때문에 반드시 div나 Fragment태그로 감싸진 형태로 작성해야한다.

(5) JSX 안에 자바스크립트 값은 중괄호로 감싼 형태로 표현한다.

  • JSX 내부에서도 JS를 사용할 수 있다.
  • 변수와 함수는 먼저 렌더 안에서 정의하고 리턴에서 변수명을 중괄호로 감싼 형태로 표현한다.
  • 이미지의 경우 import를 해서 해당 변수를 src의 중괄호에 넣어 띄울 수 있다.(src, id, href 등의 속성에도 {변수명, 함수 등})

(6) 속성값은 오브젝트 자료형 형식으로, 속성명은 CamelCase로 넣는다.

✔️ JSX 예시

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let posts = '강남 고기 맛집'
  function app (){
    return 100
  }
  return (
    <div className="App">
      <div className="black-nav">
        <div style={ { color: 'blue', fontSize: '30px' } }>개발 blog</div>
      </div>
      <img src={logo}/>
      {/* 로고이미지 */}
      <h4> { app() } </h4>
      {/* 100 */}
    </div>
  );
}

export default App;

3. React 문법

✔️ state

state란?

  • 변수 대신 쓰는 데이터 저장공간
  • useState()를 이용해 만들어야함
  • 리액트 파일 상단에 import React, { useState } from 'react';을 명시하는 것을 잊지말자!
  • 문자, 숫자, 배열, 객체 다 저장 가능
  • 보통 수시로 바뀌는 데이터를 넣어두면 매우 간편하다.

state 사용방법

let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '여자 향수 추천']); //array[a, b]생성
  • 위 코드에서 '글제목'은 배열 요소를 담는 변수역할을, '글제목변경'은 '글제목'을 대체할 데이터(함수)가 들어온다.

state의 장점

  • 웹앱처럼 동작하려면 중요한 데이터를 스테이트에 저장해야한다.
  • 스테이트는 변경되면 HTML이 자동으로 재렌더링 된다.(새로고침없이도 데이터를 바꿀 수 있음)
  • HTML이 새로고침 없이도 스무스하게 변경됨

예제

버튼을 클릭하면 첫번째 블로그 포스팅의 제목을 "여자 코트 추천"으로 바꿔보자!

/* eslint-disable */

import React,  { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '남자 셔츠 추천', '여자 향수 추천']); //array[a, b]생성
  function titleChange(){
    let newArr = [...글제목]; //복사를 할때는 딥카피를 해야한다.(reference data type의 특징)
    newArr[0] = '여자 코트 추천'
    글제목변경( newArr )
    // 글제목변경(["여자코트추천", 글제목[1], 글제목[2]]);
  }
  let [따봉, 따봉변경] = useState(0);

  let posts = '강남 고기 맛집'
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <button onClick={ titleChange }>버튼</button>
      <div className="list">
        <h3> { 글제목[0] } <span onClick={ ()=>{ (따봉변경(따봉+1)) } }>👍</span> { 따봉 } </h3>
        <p>6월 19일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> { 글제목[1] } </h3>
        <p>6월 19일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> { 글제목[2] } </h3>
        <p>6월 19일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;
  • 클릭에 대한 이벤트를 만들기 위해서는 해당하는 태그에 onClick={ ()=>{} }과 같은 형식으로 속성처럼 넣어준다. 중괄호 안에는 무조건 함수가 들어가야한다.
  • 리액트의 대원칙은 immutable data, 즉 데이터의 원본을 함부로 수정할 수 없다.
  • 따라서 위의 예제에서 글제목[0] = "여자 코트 추천과 같은 형식으로 원본 배열의 데이터를 수정할 수 없기에, 딥카피([...글제목]을 이용, 그냥 글제목을 넣으면 데이터 공유가 된다.)를 통해 새로운 배열의 사본을 만들어야한다.

✔️ component

component란?

HTML을 한 단어로 줄여서 쓸 수 있는 방법이다.
리액트를 쓰는 중요한 이유 중 하나.
관리가 매우 매우 편해짐.

component 사용방법

  1. 함수 만들고 이름짓고
  2. 축약을 원하는 HTML을 return에 넣고
  3. 원하는 곳에서 <함수명/>

주의점

  • 함수이름은 대문자로 시작함
  • return()안에 있는 건 하나의 태그에 묶어야 한다.(병렬구조 안됨) 이때 fragment(빈태그)를 사용할 수 있다.
  • 반복출현하는 HTML 덩어리나, 사이트에서 자주 변경되는 HTML UI들, 다른 페이지 만들때 등에 쓰이면 좋다.
  • 그러나, state 쓸 때 복잡해진다.(스코프 문제...) 이런 문제를 해결하기 위해서는 props문법을 이용해야한다.

예시

/* eslint-disable */

import React,  { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <Modal></Modal>
    </div>
  );
}
function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
export default App;

Tip!

  • /* eslint-disable */를 상단에 넣으면 워닝 메시지가 뜨지 않는다.

참고 사이트

요행을 바라지 않는 개발자
코딩애플 리액트 강의

profile
Somi
다음 포스트

TIL041 React Session #1 Intro

post-custom-banner

0개의 댓글