[CaseStudy] 2주차 - React는 왜 탄생하게 되었을까?

• html, css, javascript 사용 시 문제점

1. 반복적인 코드 사용(코드 중복) -> 수정할 부분이 생기면 해당 부분을 모두 찾아 하나하나 바꿔줘야 함
2. 페이지 이동 시 새로고침 됨 -> 깜빡깜빡거림
3. 페이지 이동 시마다 서버에게 요청해야 함 -> 서버 과부하 우려

 

• React의 특징

1. 컴포넌트 구조로 되어있다.

MVP구조에서 'V', 즉 View = 보여지는 것에만 신경을 쓴다. 이것의 기본 단위가 컴포넌트

반복적인 부분을 컴포넌트화시켜서 사용함 (재사용)

 

2. SPA (Single Page Application)

페이지 하나로 구성되는 애플리케이션

한 페이지 안에서 페이지의 이동이 일어나기 때문에 로딩을 초기에 한번만 해주면 된다(페이지 이동할 때마다 서버에 요청을 안해줘도 됨) -> 깜빡임 x, 서버 과부하 방지

- 장점 : 사용자 친화적이다(보기 편하다), 필요한 부분만 가져오기 때문에 로딩 속도가 빠르다

- 단점 : 처음 불러올 때 오래 걸린다, 검색 엔진(html 파일 자체를 검색)이 찾기 힘듦

<-> MPA (Multiple Page Application)

*오늘 해온 클론코딩을 리액트로 옮겨오는게 과젠데 라우팅 부분은 안해도 됨. 

 

3. JSX 문법

 

4. 두 가지 변수 Props/State 사용

부모 컴프넌트와 자식 컴포넌트 간의 변수를 이동할 시 -> Props

한 컴포넌트 내에서 변수를 사용할 시 -> State 

ex) 마켓컬리에서 상품 목록 컴포넌트(부모)에서 누르면 상품 상세 페이지(자식)으로 넘어가는 건 Props

간단하게 Props는 읽기 전용, State는 쓰기 전용으로 생각 (자식에서 불러오는 것과 변수에 변경사항을 적용하는 것의 차이로 이해하면 됨.)

 

• React 실습

초기 설치 (node.js) 및 환경설정 필요

 

• 과제 안내

props와 state

컴포넌트화

이것들을 중점으로 react로 바꾸기