React - 1

---

 

 

 

 

리액트(React)

 

• UI를 구성하기 위한 자바스크립트 라이브러리
• 컴포넌트를 기반으로 화면을 효율적으로 재사용/관리할 수 있도록 설계뙨 프론트엔드 기술
• 전통적인 DOM을 직접 조작하는 대신, 가상 DOM(Virtual DOM)을 통해 변경된 부분만 최소 비용으로 업데이트 함(메모리를 조금 더 사용하긴 함)
• SPA개발을 넘어 next.js같은 프레임워크와 함께 SSR/CSR/SSG/ISR 등 다양한 렌더링 전략을 지원하는 기술

 

 

 

 

SPA(Single Page Application)

 

• 하나의 HTML 페이지에서 모든 화면 전환을 처리하는 웹 애플리케이션 방식
• 기존의 MPA(Multi Page Application)처럼 페이지 이동 때마다 서버에서 HTML을 재요청하지 않고 처음 한 번만 HTML, CSS, JS를 받아오고 이후 화면 전환은 자바스크립트가 브라우저 내부에서 렌더링을 변경해 처리
• 페이지 이동처럼 보이더라도 실제로는 페이지가 다시 로드되지 않는 구조

 

 

 

 

리액트의 동작 원리

 

• 리액트는 UI를 컴포넌트 단위로 구성함
• 화면을 버튼, 카드, 리스트처럼 작은 단위의 컴포넌트로 쪼개어 만들고 각 컴퍼넌트가 자신의 상태와 렌더링 방식을 스스로 관리하도록 함으로 재사용성과 유지보수성을 극대화
• 상태가 바뀌면 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교 후, 이전 렌더링 때 만들어두었던 Virtual DOM과 어디가 어떻게 달라졌는지 계산
• 변경된 부분만 실제 DOM에 반영하여 렌더링 비용을 최소화 시킴
• 함수 Hook을 통해 상태 관리와 렌더링 사이클을 제어할 수 있음
• 함수형 컴퍼넌트에서 상태를 저장하고, 렌더링 시점 전/후에 실행할 로직을 등록할 수 있게 해주며 언제 어떤 조건에서 다시 렌더링해야 하는지 세밀하게 제어함

 

 

 

 

Vite

 

• 차세대 프론트엔드 개발을 위한 초고속 빌드 도구
• 기존 번들(Webpack 등)보다 훨씬 빠르게 개발 서버를 실행하고 파일 변경을 처리할 수 있는 도구
• 명령어
  
  • npm create vite@latest 폴더명 -- --template react
  • 터미널(cmd) -> 위 명령어 적기 -> Reate 선택 -> JavaScript + Reate Compiler 선택 -> ESLint 선택
  • => 새로운 파일 생성됨(node_modules, public, src폴더 / .gitignore, eslint.config.js, index.html, package-lock.json, package.json, README.md, vite.config.js 파일)
  • 터미널에 Local: http://사이트가 생성됨. 해당 링크 열면 실행 됨

 

 

 

 

.jsx

 

 

• 자바스크립트에 HTML 코드를 얹은 파일
• 자바스크립트 파일 안에서 변수나 함수를 쓰다가 갑자기 <div>같은 HTML코드를 섞어 쓸 수 있게 해줌
• 자바스크립트와 대부분 유사하지만 조금씩 함수 혹은 내장되어있는 키워드의 이름이 다를 수 있음

 

 

 

 

 

---

 

 

 

 

 

 

Hook 함수

 

 

 

 

useState

 

• 컴퍼넌트 안에서 값을 기억하고 그 값이 바뀌면 화면을 자동으로 다시 그려주는 Reate의 상태 관리 함수
• 값이 바뀌면 자동으로 화면이 다시 리렌더링 돰
  • const [state값, state 바꾸는 함수] = useState(초기값)

 

 

 

useRef

 

 

• 리액트 컴포넌트 안에서 값을 기억해두는 상자
• 값을 바꿔도 리랜더링이 일어나지 않으며 컴포넌트가 다시 랜더링되어도 상자의 값을 계속 재사용할 수 있음
  • const idInput = useRef()
  • console.log(ref.current)

 

 

useEffect

 

• 추가 작업 또는 외부 시스템과의 동기화 작업을 할 때 사용하는 상태 관리 함수
  •  
• ex)

  useEffect(() => {
    실행할 작업
  }, [의존성])   // [의존성] 바뀌면 Effect 다시 실행

  useEffect(() => {
    바뀔 작업
    return() => {
      바뀌기 전 데이터를 반환(이전 작업을 정리할 함수)
    }
  }, [의존성])

 

 

 

1. 컴포넌트 함수 실행
2. jsx 생성 -> 컴포넌트가 처음 화면에 나타날 때(초기 mount)
3. userEffect 실행 -> user 설정: user값
4. user값이 변경되었을 때(useEffect 재실행)
5. 컴포넌트가 화면에서 완전히 사라질 때(Unmount, userEffect 재실행)

 

 

 

 

 

---