😼

react에 대해서 처음 공부하는 것이고 간단하게 써보려고한다.

React란?

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

React의 장점

React의 가장 큰 장점이라 하면 데이터 바인딩이 쉽다.
html 태그안에 변수명을 집어넣거나, 함수를 집어넣어서 데이터를 출력하는 것이 가능하다.

function App(){
	let posts = '글제목';
    function title(){
    	return '글제목입니다.';
    }
    return(
    	<div>
        	<h3>{posts}</h3>
            <h3>{title()}</h3>
        </div>
        
    );

}

state

리액트는 데이터를 변수에 넣을 수 있고, 또한 state에 넣을 수 있다.
state는 변수 대신 쓰는 데이터 저장공간이며

import React, {useState} from 'react';

해당 코드를 통해서 useState()를 이용해서 만들어야한다.
useState는 2개의 데이터가 존재하게 되는데
하나는 useState(데이터, 데이터 변경함수)이다.

let [a,b] = useState(데이터) 이렇게 표현한 걸 es6 destructuring 문법으로 표현한 것이다.

또한 let [title, chageTitle] = useState(['글제목1', '글제목2']);
이렇게 배열로도 표현이 가능하다.

state를 만든느 이유는 리액트를 웹app처럼 동작하고 싶게 만들고 싶다면 사용한다.
state로 만들어진 데이터가 변경이 되면 새로고침 없이 html이 자동으로 렌더링이 되어 화면의 깜빡임 없이 데이터가 변경이 된다.
그러나 변수로 만들어놓고 변수가 변경이 되면 자동 렌더링이 되는 것이 아니라 새로고침으로 화면을 바꿔야하는 불편함이 있다.

정리하자면 자주 바뀌는 중요한 데이터는 변수보다는 state로 저장해서 사용하는 것이 좋다.

state 변경

state는 그냥 변경이 되는 것이 아니라, 변경 방법이 따로 존재한다.
useState의 2개의 데이터에서 변경함수 데이터를 사용하면 된다.

function btnChangeTitle(){
    // let newTitle = "새로운 제목"; 이렇게 하는 거 보단
    // object, array에선 state의 복사본을 만들어서 수정하자
    // let newTitle = title; 이건 복사가 아니라 참조형 데이터 타입이기에 값을 공유하는 꼴
    // react에서는 데이터는 불변의 데이터여야한다 (jpa랑 비슷)
    // immutalbe data
    let newTitle = [...title]; // deep copy
    newTitle[0] = '하하하';
    changeTitle(newTitle);
  } 

Component

Component문법은 긴 html을 줄일 수 있다는 편리함이 있다.
이름은 소문자 보다는 대문자로 시작해서 만든다.

function App(){
	<div className="list">
          <h3>{title[0]} <span onClick={ () => {changeCount(likeCount + 1)} }>👍</span> {likeCount} </h3>
          <p>2월 17일</p>
          <hr/>
      </div>
      
      <Modal/>

}



function Modal(){
 // return 안에 있는 건 태그하나로 묶어야 한다.
 // <></> 이렇게 쓰면 의미없는 <div></div> 큰 div를 안 써도 된다. Fragment 문법
 // Component 만드는 위치는 function App이랑 나란히 만든다.
 // Component를 만들면 그 안에 또 다른 Component도 만드는 게 가능해지고 관리가 편해진다.
 // Component 만드는 기준
 // Component는 반복 출현하는 HTML들로 만드는 것이 좋다.
 // 자주 변경되는 HTML UI들
 // 다른 페이지 만들 때도 Component로 만듦

 // 너무 많이 만들면 단점
 // state를 쓸 때 복잡해진다.
 // 실제로 app에 선언된 title state는 해당 app 함수에서만 존재한다.
 // 상위 Component에서 만든 state를 쓰려면 props문법을 이용해야한다.
  return(
    <div className="modal">
      <h2>글제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

Fragments

return 안에는 연속된 html태그가 존재할 수 없다
그래서 div를 여러 개 만들고 싶다면 큰 div안에 여러개 div를 만들어서 사용한다
혹은 의미없는 div를 만들기 싫다면 fragments 문법으로 <></> 이렇게 크게 감싸주는 것도 가능하다.