[ React 01 ] React 설치 및 시작 , JSX 문법 , State

1. React 설치 및 시작

1 ) npx create-react-app blog

vs code 의 terminal 창에 위의 코드를 입력해주면 설치가 됩니다.

blog는 내가 만들고자하는 폴더 이름을 입력해주면 됩니다. 

이것은 react 를 할수 있게 해주는 라이브러리가 담겨있는 것을 모두 설치할 수 있게 해주는 것입니다. 

 

 

 

2) npm start 입력 

이때, cd blog 로 blog ( 혹은 위에서 자신이 만든 폴더 ) 로 이동을 해준 다음에 npm start를 입력해주어야합니다. 

그러면 crom 창이 새로 생기게 됩니다. 

 

 

2. JSX 문법 

:  return 안에 html 같은 문법이 들어가있는 것을 의미합니다. 

 

 

jsx 문법의 특징

a. 태그에 class 주고싶다면,  <div className ="클래스명"> 을 입력해줌

b. 리액트에서 데이터 바인딩이 쉽게 됨 - 따라서, HTML 을 그대로 쓰지 않음 

  - { 변수명 , 함수 등 } 을 {} 안에 그대로 넣어주면 됨 

  let posts = '강남 고기 맛집'
  return (
    <div className="App">
      <div className='black-nav'>
        <div>개발 Blog</div>
      </div>
      < h4> {posts}</h4>
    </div>
  );
}

- 이미지도 import 로 받아와서 {} 에 넣어주면 됨

- className 도 가능 

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

function App() {

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

- style 도 변경 가능 

// 이런식으로 직접 넣어도 됨
<div style = {{ color: 'blue', fonSsize : '30px'}}> 개발 Blog</div>

// 이런식으로 변수로 넣을 수 도 있다.
let st = { color : 'blue', fonSsize : '30px'}
        <div style = { st }> 개발 Blog</div>

 

 

3. 글 목록 만들기  - State 문법

:  State 는 react 문법이다. 그중에서 데이터를 보간할 때 사용한다. 

2번에서 언급한 것을 포함하여 정리하자면 데이터를 보간할때, 그냥 1. 변수에 보간  , 2. state에 넣기 둘다 가능하다.

 

1) State를 사용하기 위해서는 import를 해야한다. 

import React, { useState } from 'react'

2) useState 는 array로 나오게 된다.  

: useState('남자 코트 추천'); 를 적으면, 결론적으로 [ a,b ] 라는 array 로 나오게 됨 

 

3) useState() 에는 '문자' 도 넣을 수 있고, 'array'도 넣을 수 있다.

- '문자 넣기'

  let [글제목,글제목변경] = useState('남자 코트 추천'); 
 
  return (
    <div className="App">
      <div className='black-nav'>
        <div> 개발 Blog</div>
      </div>
      <div className="list">
        <h3> {글제목} </h3>

 

-  array넣기

let [글제목,글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']); 
<h3> {글제목[1]} </h3>

 

4 ) state의 장점

: state를 사용하는 이유는 웹이 app처럼 동작하게 만들고 싶어서이다. state는 변경되면 HTML이 자동으로 재렌더링이 된다. 

즉, 정보가 바뀔때, 새로고침이 되는 것이아니라, 바뀐 정보가 자연스럽게 바뀌게 되는 것이다. 

따라서, 자주 바뀌는 것은 state로 하는 것이 좋다.  자주 바뀌지 않는 것은 state로 굳이 만들지 않아도 된다. 

 

 

* 기타 TIP 

- 이걸 맨위의 코드에 넣으면, warning을 무시하게 된다. 

/* eslint-disable */

 

 

4.  좋아요 만들기 - onClick() , State 를 이용하여 값 변경

1) 클릭 버튼 만들기

- 옛날 자바스크립트 코드

<h3> {글제목[0]} <span onClick="">👍</span> 0 </h3>

 

- 리액트 코드

: onClick 에는 무조건 { 클릭될 떄 실행할  함수} 를 구현해서 넣어줘야한다.

아니면, onClick = { () => { 실행할 내용 } }

ex, onClick = { () => { 1+1 } }  - 클릭할때마다 1+1 이 된다는 의미 

 onClick = { () => { console.log(1)} } - 누를때마다 콘솔에 숫자가 올라감 

<h3> {글제목[0]} <span onClick={ 함수() }>👍</span> 0 </h3>

 

그러나, state는 그냥 변경이 되지 않음. 즉, 

let [좋아요, 좋아요변경] = useState(0);
<h3> {글제목[0]} <span onClick={ () => { 좋아요 + 1}) }>👍</span> {좋아요} </h3>

이런식으로 코드를 작성하면 아무것도 이러나지 않게 된다. 

 

2) state를 이용하여, 좋아요 버튼 누르면 숫자 올라가게 만들기

 

따라서, 아래의 코트처럼 변경해야한다. 이런식으로 state를 이용해야 재 렌더링이 일어나게 된다. 

let [좋아요, 좋아요변경] = useState(0);
<h3> {글제목[0]} <span onClick={ () => {좋아요변경(좋아요+1)} }>👍</span> {좋아요} </h3>

 

 

5. 버튼을 누르면 제목이 바꾸기 - state로 array 중 값하나 바꾸기

1) 잘못된 코드

- state에 직접 함수를 넣을 때는 '제목바꾸기()' 가 아니라, '제목바꾸기' 를 입력해야하다. 

() 을 포함하면 바로 실행하라는 뜻이 되기 때문에 안된다. 

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

 

 

위에서 언급한 것처럼 state는 직접 변경해서는 안된다. 즉. 아래의 코드는 틀린 코드이다. 

  function 제목바꾸기(){
    글제목[0] = '여자 코트 추천'
  }

 

2) 올바른 코드

- 아래 식으로, 글제목 변경 함수를 사용해야 한다. 

  function 제목바꾸기(){
    글제목변경(['여자 코트 추천', '강남 우동 맛집','요거트맛집']);
  }

 

혹은, state를 하나만 바꾸고 싶을 때는 state를 deep copy 해서 수정해야한다. 

그냥 copy를 값을 공유하게 되서 안된다.  deep copy는 [...변수] 를 적어주면된다. 

function App() {
  let [글제목,글제목변경] = useState(['남자코트추천','젤리 맛집','요거트맛집' ]); 
  let [좋아요, 좋아요변경] = useState(0);

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자코트 추천';
    글제목변경(newArray);
  }
  
  return (
     <button onClick={제목바꾸기}>버튼</button> 
  )

 

즉 , 글을 변경하고 싶을 때는

1. 기존 state 카피본을 만들기

2. 카피본에 수정사항 반영하기

3. 변경함수()에 집어넣기

 

---

: 코딩애플 강의를 공부하고 정리한 내용입니다.