React6 (React) NextJS 목차 1. Next.js 란? - SSR ↔ CSR 이란 2. Nex.js의 주요 기능 3. 기본 설정 및 실행 결과 Next.js 란? React를 기반으로 기존의 CSR(Client Side Rendering)아 아닌 SSR(Server Side Rendering)을 간편하게 사용할 수 있게 해주는 프레임 워크 SSR이란? (Server Side Rendering) ↔ CSR (Client Side Rendering) 웹 애플리케이션 랜더링 방식으로 사용자가 웹페이지에 접근할 때, 요청받은 서버는 완전하게 만들어진 HTML(CSS가 적용된)과 JS코드를 브라우저에게 응답해준다 이후 브라우저는 HTML을 띄워줌에 이어서 JS코드를 다운하고 실행한다. 이에 CSR보다 빠른 초기 로딩이라는 장점이 있다. .. 2023. 6. 14. (React) redux Redux JS 상태 관리 라이브러리 특징 : FLUX 모델을 사용, 기반 FLUX 모델 : 기존에 많이 사용했던 MVC 모델의 단점을 보완하기 위해 개발 MVC : Model View Controller Controller → Model ↔ View Facebook에서 만든 client-side web applications을 구축할 때 사용하는 구조, 패턴 MVC의 단점을 보완하는 단방향 데이터 흐름의 구조 Redux는 Flux 패턴과 다르게 좀 더 정돈된 형태로 쓸 수 있게 도와주는 라이브러리 Redux의 개념과 흐름 Action → Dispatch → Reducer → Store → View → Action action : 요청, 목적(type)과 필요한 내용(payload)을 담은 객체 저장소로.. 2023. 2. 8. (React) Component React Component React로 만들어진 웹을 구성하는 최소한 단위 기존의 웹 프레임워크는 MVC 방식으로 각 요소의 의존성이 높다, 재활용이 어렵다 Component는 MVC의 View를 독립적으로 구성이 가능하며 쉽게 만들 수 있다 Component의 이름은 항상 대문자로 시작 UI를 재사용이 가능한 개별적인, 독립적인 여러 조각(Components)으로 나누고, 각 조각(Component)을 개별적으로 나누어 코딩한다 Javascript 함수와 유사하다 임의의 props 데이터를 받은 후 화면에 어떻게 표시되는지를 기술하는 React 객체를 반환 종류 함수형 컴포넌트 (Functional Component) 함수형에서는 함수 자체가 return 생명주기가 클래스형 컴포넌트와 다르다, 리랜더.. 2023. 2. 7. (React) Hook Hook 함수형 component에서 클래스형 component의 기능을 할 수 있도록 제공하는 기능 React v16.8에 추가된 라이브러리 class component에서의 state, life cycle처럼 사용 가능 중첩되는 함수 등에서 호출을 할 수 없다 React 내에서만 Hook을 호출 해야 한다 Custom Hook에서는 호출 가능하지만 일반적인 JS 파일, 함수에서는 호출을 할 수 없다 Hook을 생성할 때에는 앞에 use를 붙여서 생성해야 한다 Hook 규칙이 적용되는지 파악 할 수 있기 때문 React Hook은 호출 되는 순서에 의존 하나의 컴포넌트에서 여러개의 Hook이 사용되는 경우 Hook은 위에서 아래로 순서대로 동작 Hook의 장점 쉽고 직관적으로 같은 기능으로 만들 수 있.. 2023. 2. 7. 이전 1 2 다음
