SPA, React 입문

Happhee·2022년 4월 24일
SOPT
0

THE SOPT

목록 보기
2/2
post-thumbnail

✨ React

특징

  • 선언형

    JSX에서 map 함수를 이용한 부분이다.
    과정이 드러나는 명령형이 아닌 결과에 치중한 선언형 프로그래밍을 사용하는 것이다.

  • 컴포넌트 기반

  • SPA Single Page Application

    • MPA 페이지 이동을 할 때마다 요청을 하는 어플리케이션이다.
    • 딱 한 번만 리소스를 받아온다.
    • 부분적인 화면 교체가 이루어진다.
    • 다양한 SPA 프레임워크 / 라이브러리들이 존재한다.
  • Virtual DOM DOM을 추상화한 메모리 상의 JavaScript 객체이다.
    • 직접 조작하는 것은 비용이 높은 연산을 수행하게 된다.
    • React는 가상돔을 사용하여 변경을 요청하고 필요한 부분만 실제돔에 적용한다.
    • 한 번의 교체로 모든 것을 변화시킨다.

왜 배우는 걸까?

  1. 생태계가 방대하다.
  2. 타입스크립트와 궁합이 좋다.
  3. 자유도가 높다.
    👉 라이브러리이기에 가능한 것이다.

✨JSX

문법

중괄호 안에 자바스크립트의 값들, 표현식을 넣는다.

const SOPT = 'THE-SOPT';
const Main = (
  <h1>{ SOPT }</h1>
  );

위와 같이 중괄호를 사용하여 자바스크립트의 값들을 넣을 수 있다.
JSX 문법을 사용한다.

사용하는 이유?

마크업과 로직을 분리하지 않아도 되기 때문이다.

속성

👉 camelCase를 따른다.
ex ) class -> className, onclick -> onClick

컴파일 과정

const Main = <h1>'THE-SOPT'</h1>;

const Main = React.creatElement('h1', null, 'THE-SOPT');

이렇게 createElement로 컴파일 해주는 것이 Bable이다.

JSX는 손쉽게 ReactElement를 만들어주는 문법적 도구이다.

CRA (Create React App)

React에서 제공하는 boilerplate이다.

반드시 CRA로 React를 개발해야 하는 것은 아니지만, 미숙하다면 쓰도록 하자.

// 해당 디렉토리에 바로 설치
yarn create-react-app .

// 해당 디렉토리 안에 폴더 생성 후 설치
yarn create-react-app [name]

✨ Component

기본적으로 함수와 유사한 구조이다.
Props 👉 Component 👉 React Element

여기서 props 란?
외부에서 어떤 Component에게 전달하고자 하는 값이 있다면 사용하는 속성이다.

class vs fuction

  • class
    render 메소드 안에서 JSX를 반환하고, props는 this.props로 조회한다.

  • function
    함수 내부에서 JSX를 반환하고, 함수의 파라미터에서 props를 조회한다.

    • this의 가변성으로 인한 문제
    • LifeCycle에서의 중복 코드
    • 함수형 컴포넌트의 가독성

규칙

  1. 사용자 컴포넌트의 이름은 대문자로 시작해야 한다.
  2. JSX를 구성하는 최상위 태그는 하나이어야 한다.
    만약, 여러 개라면 Fragment를 사용해서 해결해야 한다.
  3. 태그는 반드시 닫혀있어야 한다.

렌더링 with props

🤔 반복되는 컴포넌트는 어떻게 처리할까?

map함수를 통한 반복으로 코드를 간략히 나타낸다.

JSX에서의 배열은 실제로 전개되어서 나타난다.
❗️ return은 반드시 있어야 한다. ❗️

🤔 key는 무엇일까?

React에서 렌더링 성능을 최적화하기 위해 제공하는 것이며, 어떤 항목을 변경 / 추가하고 삭제할 지를 알아보는 역할을 한다.
때문에 고유해야 하고, index 사용은 지양해야 한다.

🤔 children은 어떻게 사용할까?

props로 받는 것도 가능하지만, 구조 분해 할당을 사용하는 것도 가능하다.
특히, children은 props가 하나인 경우에 유용하게 사용될 수 있다.

조건부 렌더링

  1. return문 내부에서 삼항 연산자를 사용하는 방법
  2. return문 내부에서 함수나 변수를 이용하는 방법
    👉 예외처리가 쉬울 수 있다.
  3. 먼저 return 해버림으로써 조건부로 처리하는 방식
  4. && 연산자를 사용해 특정 조건일 때만 렌더링하는 방법.

Re-렌더링

동적인 웹이기에 화면이 계속 바뀌게 된다. 때문에 화면을 다시 그려주는 리렌더링이 발생한다.

  • props가 변경되었을 때
  • state가 변경되었을 때
  • 부모 컴포넌트가 리렌더링 될 때
  • 강제로 리렌더링

✨ State

데이터들이 담기는 공간이다.
즉, 화면 변화에 영향을 끼치는 값을 말한다.

문법

// export로 내보낸 모듈
import { WEB, SERVER } from "./module";

// export default로 내보낸 모듈
import SOPT from "./module";

// 한 번에 가져오기
import { default as SOPT, WEB, SERVER } from "./module";

👇 useState는 hook이라고 한다.

// state 가져오기
import { useState } from "react";
const [ 스테이트, 스테이트바꾸기 ] = useState(초기값);

스테이트라는 변수에 값을 보관하고 스테이트 바꾸기라는 함수를 사용해 값을 변경한다.

🤔 왜 함수를 사용해야 하는가?

함수를 사용하지 않는다면 스테이트 값 자체는 변경이 될 수도 있겠지만, 리렌더링이 일어나지 않기 때문이다.

function Clock() {
  let currentTime = new Date().toLocaleTimeString();
  setInterval(() => {
    currentTime = new Date().toLocaleTimeString();
  }, 1000);
  return (
    <div>
      <h1>지금 시간은 몇시게여 ?</h1>
      <h2>{currentTime}</h2>
    </div>
  );
}

export default Clock;


import { useState } from "react";
function Clock() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  setInterval(() => {
    setTime(new Date().toLocaleTimeString());
  }, 1000);
  return (
    <div>
      <h1>지금 시간은 몇시게여 ?</h1>
      <h2>{time}</h2>
    </div>
  );
}

export default Clock;

화면의 리렌더링은 컴포넌트의 재실행을 의미하고, 그때마다 변수를 다시 할당하는 것을 말한다.

부모 컴포넌트가 리렌더링이 될 때, 자식까지 리렌더링이 된다
👉 useMemo()를 사용해서 해결하긴한다.

shallow 비교 ( 얕은 비교 )

React에서는 같은 주소를 바라보고 있으면 같은 값으로 여기는 비교를 말한다.

👉 spread 연산자를 사용해서 새로운 배열을 반환해야 다른 주소를 바라보게 한다.

그러나 깊이가 깊어지고, 구조가 복잡해지면 spread 연산자만으로는 부족하다. 때문에 Deep copy를 직접 구현해야 한다.

이러한 동작들을 불변성을 유지한다라고 부른다.
React에서 굉장히 중요하다. 이전의 state값과 현재 state값이 다르지 않다면 리렌더링을 수행하지 않는다.

✨ React 데이터 Flow

모든 데이터는 부모에서 자식으로 전달된다.
이를 단방향 데이터 Flow 라고 한다.

✨ React Hooks

함수형에서만 사용 가능하며, class형 LifeCycle 등등을 합친 것이다.

  • useState
  • useEffect
  • useRef
  • useCallback
  • useMemo

useEffect

렌더링 이후에 수행해야할 작업들을 지정하는 역할이다.

✅ 처음 컴포넌트가 나타났을 때 👉 mount
✅ 컴포넌트가 사라질 때 👉 unmount
✅ 컴포넌트가 리렌더링 될 때 👉 update

의존성 배열은 어떤 상황에서 useEffect를 실행할 지를 결정한다.

useEffrct(() => {
}, []);

의존성 배열을 비워두게 되며는 최초 한 번만 실행되고 멈추게 된다.

👇 Clean Up 함수는 매 업데이트 전 또는 unmount시 호출된다.

useEffrct(() => {
  // Clean Up 함수 
  return () => {
    
  }
}, [count]);

필요없는 state를 지워주는 역할을 한다.

useRef

무엇이든 담을 수 있는 창고이다.

✅ DOM 요소를 가리키는 역할
✅ 화면 변화와 관계 없는 값을 저장할 때
✅ scroll 관련 값을 핸들링 할 때

const boxRef = useRef(null);

// boxRef.current 안에 아래의 값이 담기게 된다.
<div className ="box" ref={boxRef}></div>

ref의 값을 의도적으로 변경한다고 해도 리렌더링이 일어나지 않는다.

✨ Styled Components

CSS - in - JS로 작성할 수 있게 만들어 주는 라이브러리이다. 컴포넌트로 css를 구현하는 것이다.

특징
✅ 변수에 따른 동적 스타일링이 간편하다.
✅ class 이름 짓는 것으로 머리 아플 일이 없다.
✅ 별도의 css 파일을 생성하고 link할 필요가 없다.

yarn add styled-components

vscode-styled-components 과 vscode-styled-snippets 플러그인과 함께 사용하도록 하자.

imcs, sc, scp단축키가 있다.

const 변수명 = styled.태그`
// css 코드
`;
return(
  <Container>
  	<h1>THE-SOPT</h1>
  	<div> WEB </div>
  </Container>
);
const Container = styled.main`
  height : 100vh;
  width : 100%;

  background-color : purple;
  color : white

// 나 자신 바로 밑의 자식 h1
  & > h1 {
    font-size : 55px;
    color : red;
  }
  &:hover {
  	cursor : pointer;
  }
`;

// Container 속성을 그대로 가져와서 사용
const MyWrapper = styled(Container).``;

& 선택자는 나 자신을 가리킨다.

css 로 지정할 수도 있다.

profile
Happhee
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다
이전 포스트

JS 연산 & 조건 / 객체 / DOM API

0개의 댓글