React

Why React?

리액트란 자바스크립트로 만든 SPA의 한계를 극복하기 위해 등장한 라이브러리다.

SPA는 모든 페이지를 한 페이지에서 구현하기 때문에 상태 관리가 어려울 수 있다는 단점이 있다. 

 

기존 프론트엔드 개발의 문제점

1. DOM 조작의 어려움

2. 코드 관리 어려움

3. 성능 저하

 

리액트의 장점

1. 인터페이스를 독립적인 컴포넌트로 구성하여 코드 재 사용성, 유지 보수성, 확장성을 향상 시킴.

2. 가상 DOM을 통해 실제 DOM을 추상화하여 UI 업데이트를 효율적으로 처리. 성능 저하 최소화.

3. 내장된 상태 관리 기능과 서드 파티 라이브러리가 많음

 

리액트 작성 예시

JSX

JSX 문법

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

function App() {
  let post = "강남 우동 맛집";
  // document.querySelector("h4").innerHTML = post;

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{ color: "red", fontSize: "16px" }}>블로그임</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

export default App;

 

1. class 넣을 땐 className

2. 변수 넣을 땐 중괄호 사용 -> '데이터 바인딩은 {중괄호}' 라고 표현한다

이럴 때 사용

3. style 넣을 땐 style={{이름: 값}};

 

 

추가적으로 알아야 할 것,

return() 안에 병렬로 된 태그 2개 이상 기입 금지.

 

state는 왜 사용하는 것일까?

 

자료를 잠깐 저장할 때 변수를 사용한다.

 

'강남 우동 맛집'이라는 변수를 post에 담았다.

 

자료를 잠깐 저장할 땐 state를 사용해도 된다.

 

state 만드는 법

1. import{ useState }

2. useState(보관할 자료)

3. let [작명, 작명] = useState('블라블라') -> 데이터 바인딩

변수처럼 불러와 쓸 수 있다. 구조분해 할당으로 넣어준다.

내가 직접 html을 변경할 필요 없이 알아서 자동 재렌더링 된다는 장점이 있다. 

 

 

useState로 변경하는 법

- state 변경 함수 사용

 

state가 array/object라면?

array/object 담은 변수엔 화살표만 저장됨.(메모리 주소만) 그래서 array/object 자료를 복사하면 이상한 일이 일어난다.

이런 식으로 사용하면 복사가 된다. data1에 있는 자료를 data2에 복사한다는 뜻. 그럼 data2를 출력해보면 [1,2,3]이게 잘 나온다. 그런데 data1과 data2는 각각 [1,2,3]을 별개로 저장하는게 아니라 data1과 data2는 똑같은 값을 공유한다.(얕은 복사) 그렇기에 data1을 변경하면 data2도 자동으로 변경된다. 왜냐하면 변수에 램에 저장된 값을 가리키는 화살표만 저장되기 때문이다. 즉, data1과 data2는 똑같은 화살표를 가지게 된다. 같은 자료를 가리킴(같은 메모리 주소를 가진다.)

array/object를 다룰 때 원본은 보존하는 게 좋음. 독립적 카피본을 만들어서 수정해야 한다. 

 

새로운 배열로 만들고 싶다면 아래와 같이 복사해야 한다.

const data1 = [1,2,3];

const data2 = […data1]; → 새로운 배열을만들어 복사

서로 다른 메모리 주소를 가지게 된다.

 

 

어떤 걸 컴포넌트로 만들면 좋은가?

1. 반복적인 html이 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들

컴포넌트의 단점

state 가져다 쓸 때 문제 발생

A함수에 있는 변수는 B함수에서 맘대로 가져다 쓸 수 없음. 그래서 모든 것을 component로 만들면 안된다.