Category/FrontEnd8 [리액트] 컴포넌트간 데이터 전송방식 리액트에서 props를 통해 state를 상위컴포넌트에서 하위컴포넌트로 전달하는 방식은 가장 보편적으로 많이 사용하는 방법이다.그러나 이러한 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 경우는 주로 상위 컴포넌트가 상태를 관리하고, 그 상태를 하위 컴포넌트에서 활용할 때 사용되어야한다. 쇼핑몰 웹 사이트를 리액트로 개발하는 상황에서 예를 들어보면, function Content(){ function getProducts(category){ axios .get(`product/${category.toLowerCase()}`) .then((response) => { console.l.. 2025. 1. 23. 서버사이드렌더링(SSR)과 클라이언트사이드렌더링(CSR) 서버사이드렌더링(SSR)이란? 클라이언트가 요청을 하면 Server측에서 렌더링하여 HTML 파일을 만들어 클라이언트에게 제공하는 방식이다. Spring의 JSP나, Thymeleaf 가 대표적인 SSR방식으로 클라이언트의 요청이 들어왔을때, Controller에서 해당 요청을 처리하여 작성한 HTML형태의 JSP 파일에 사용자의 요구에 맞는 여러 데이터나 화면을 동적으로 생성하여 WAS(Web Application Server)를 통해 Servlet으로 변환하여 처리한다. 쉽게 말해 HTML 파일에 JAVA 코드를 통해 데이터를 넣어 동적인 HTML을 클라이언트로 전송한다. Node.js의 경우 EJS(Embedded JavaScript Template)을 통하 SSR방식으로 View를 전송할수있다. .. 2024. 3. 24. [React] 리액트 주요 개념 리액트의 주요특징 1. 가상 DOM : 일반적으로 웹 페이지 View를 변경할때, 사용자의 클릭등의 이벤트에 따라 DOM 을 변경하여 웹 사이트 내용을 갱신한다. 그러나 React는 Virtual DOM을 도입하여 리액트에서 실제 DOM의 복사본인 가상 DOM을 만든뒤, 변화를 주고 싶은 부분의 DOM을 변경하여 실제 DOM과 가상 DOM의 차이점만 반영하게 된다. 2. 컴포넌트 기반 리액트에서 요소를 렌더링하는 가장 기본적인 방식으로 함수형 또는 클래스형 컴포넌트를 통해 요소를 생성한다. 리액트의 기본 프로젝트 구조중에서 index.js라는 하나의 파일에서 웹 페이지가 생성된다. root는 React의 가장 베이스 요소이고, 해당 root 요소 안에 이라는 컴포넌트를 삽입한 형태인 것이다. 다음은 Ap.. 2024. 3. 22. [Jquery] Ajax 사용하기 동기 통신(Synchronous) : 클라이언트가 자료를 요청하면 서버를 거쳐 처리후 응답함으로인해 잠시 페이지가 Server Script 페이지로 갱신되어 새로고침되고 그동안 사용자는 어떠한 작업도 할수없다. 비동기 통신(Asynchronous) : Ajax를 사용해 사용자가 서버에 자료를 요청할 경우 ServerScript 페이지를 거치지않아도 자료를 받아올수있다. 즉, 새로고침(페이지전환)없이 서버와 통신할수있는 방식이다. 기존의 동기적 통신방법에서는 Request가 오면, 클라이언트는 이에 대한 Response를 대기하고있다가 응답을 받음으로써 통신이 종료된다. 그러나 비동기적 통신에서는 클라이언트는 Request을 보내더라도, Response를 기다리지않는다. Ajax 주요 메소드 대부분 $.a.. 2023. 12. 29. 이전 1 2 다음
