리액트 진짜 초급 강의

이 글은 유튭 코딩애플님의 React 기초 강의를 듣고 정리한 글입니당

https://youtu.be/LclObYwGj90

node.js 는 왜 설치할까?

npm이라는 툴을 사용할 수 있다.

npm으로 create react app이라는 라이브러리를 설치

각 폴더 설명

• node_modules: 라이브러리 모은 폴더
• public: static 파일 보관함 ( 이미지 등.. )
• src: 소스코드 보관함 ( 실질적인 코딩을 하는 곳 )

- package.json 파일: 설치한 라이브러리명, 버전 목록

메인 페이지 동작원리!

Index.js가 App.js을 Index.html에 넣어줌 

= App.js(메인 페이지)의 html(return 부분)을 index.html(실질적인 메인페이지)의 id가 root인a div태그에 넣어줌

HTML처럼 생긴 JSX

  1. 태그에 class를 주고 싶으면 className="클래스명"으로 style을 적용할 수 있다. ex) <div className="black-nav">

 

  2. 데이터 바인딩(데이터를 HTML에 넣는 것)이 쉽다!!! → 리액트가 편한 이유

  리액트에서는 { 변수명, 함수 등 } 중괄호 안에 자바스크립트 변수 등을 넣어서 랜더링 시킬 수 있다. src, id, href 등의 속성에도 사용 

  ex) <img src = { logo }/>

 

  3. JSX에서 style속성을 넣을 때 : 중괄호 안에 객체 형식으로 

  style = { object 자료형으로 만든 스타일 }

  ex) <div style={{ color = 'blue' }}>

 

( 코드 )

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

function App() {
  let postStyle = { color: 'blue', fontSize: '15px' }
  let posts = '블로그 글'

  return ( 
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <img src={logo} alt="logo"/>
      <h4 style={postStyle}>{posts}</h4>
    </div>
  )
}

export default App

body { /*전역 스타일*/ 
  font-family: 'nanumsquare';
}
.black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

State 쓰라구요!

데이터는 1. 변수에 넣거나( let, const, var ) 2. state에 넣거나 

 

그런데 state를 사용하는 이유는?

→ 웹이 App처럼 동작하게 만들고 싶어서 (리액트의 장점)

    =  state는 변경되면 HTML이 자동으로 재렌더링 

    = 새로고침 없이도 HTML에 렌더링, 스무스하게 변경

 

리액트의 데이터 저장공간인 state 만드는 법

  1. {useState} 상단에 첨부 (import React from 'react' 부분)

  2. useState( )사용

     let [a, b] = useState('수원 맛집 추천')  // [state데이터, state데이터 변경 함수]

  3. 문자, 숫자, array, object 다 저장가능

/*eslint-disable*/

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

function App() {
  let [글제목, 글제목변경함수] = useState('수원 맛집 추천') //[a,b]: a = 값, b = 수정 가능 함수
  let [글1, 글변경함수1] = useState(['수원 행궁동 맛집', '4월 10일'])
  let [글2, 글변경함수2] = useState(['수원 정자동 맛집', '4월 14일'])
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>
          {글제목}
        </h3>
        <p>4월 12일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{글1[0]}</h3>
        <p>{글1[1]} 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{글2[0]}</h3>
        <p>{글2[1]} 발행</p>
        <hr />
      </div>
    </div>
  )
}

export default App

이벤트 리스너

onClick = { 클릭될 때 실행할 JS } //함수 등...

onClick = { ( )=>{실행할 내용} } //콜백함수로 구현

이벤트가 발생했을 때 state를 바꾸고 싶다면 state변경함수( 대체값 ) → 재렌더링!

/*eslint-disable*/

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

function App() {
  let [글제목, 글제목변경함수] = useState('수원 맛집 추천') //[a,b]: a = 값, b = 수정 가능 함수
  let [따봉, 따봉변경] = useState(0)

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={() => { 글제목변경함수('여자 코트 추천') }}>
        버튼
      </button>
      <div className="list">
        <h3>
          {글제목} <span onClick={() => { 따봉변경(따봉 + 1) }}>
            👍
          </span>
          {따봉}
        </h3>
        <p>4월 12일 발행</p>
        <hr />
      </div>
    </div>
  )
}

export default App

state 변경하기

state는 직접 수정할 수 없다! //리액트 대 원칙: immutable data

state변경함수를 이용하고,

array나 object형식의 state는 deep copy를 한 후 복사본을 수정한다.

function 제목바꾸기() {
    var newArray = [...글제목] //state를 deep copy
    newArray[0] = '봄 옷 추천' //복사본을 수정
    글제목변경함수(newArray) //수정된 값을 변경함수에 넣어줌
  }

그리고 이벤트 리스너에서 함수를 호출할 때는 ( )중괄호 없이 써준다. 이벤트가 발생했을 때만 호출되도록

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

Component로 HTML을 깔끔하게

html덩어리인 component를 만들면 관리가 편하고 깔끔하다.

 

component를 만드는 기준?

- 반복적으로 출현하는 html덩어리, 자주 변경되는 html덩어리 (재렌더링 쉬워짐), 다른 페이지 만들 때

 

but, 단점도 있다.

- 상위 component에서 만든 state를 쓰려면 props라는 문법을 이용해야 함..! state사용이 복잡해진다.

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

function App() {
  return (
    <div className="App">
      <Modal />
    </div>
  )
}

function Modal() {
  //컴포넌트 만들기
  //1.이름은 대괄호 2. return()안에 있는 건 태그 하나로 묶어야함
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
export default App