렌더링5 리액트 실행 흐름 [ Index.js, App.js, Index.html ] 🔥 3개의 파일은 creat-react-app 하면 자동으로 파일이 생성된다🔥 public 폴더 안에 index.html 파일이 src 폴더 안에 App.js, index.js 파일이 있다 🔥 index.js제일 상위자이며 가장 먼저 react에서 실행되는 파일이다메인 프로그램이다// 필요한 부분만 작성import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(, document.getElementById('root')); 🔥 App.js컴포넌트를 정의하는 프로그램이다// 필요한 부분만 작성function App(){ // App() >> 'JSX문법' return .. 2024. 7. 12. 리액트[기초] props props 란? properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수도 있다 props를 렌더링 할 때 에는 JSX 내부에서 {} 기호로 감싸 주면 된다 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 할 수 있다 자식 컴포넌트에서는 props의 값을 직접 바꿀수는 없다 const MyComponent = (props) => { // 안녕하세요, 제 이름은 React 입니다. return 안녕하세요, 제 이름은 {props.name} 입니다. ; }; export d.. 2022. 5. 27. 리액트[기초] 초기 렌더링 과 조화 과정 렌더링 이란? 사용자 화면에 view를 보여주는 것을 말한다 초기 렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에만 처음에 어떻게 보일지 정하는 초기 렌더링이 필요하다 리액트에서는 초기 렌더링을 다루는 함수 render 가 있다 render 함수란? 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다 html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다 조화 과정 이란? 리액트에서 뷰를 업데이트할 .. 2022. 5. 24. 리액트 [기초] 리액트와 컴포넌트의 개념 리액트의 개념 페이스북에서 제공하는 자바스크립트 UI 라이브러리로 사용자 인터페이스를 만드는 데 사용된다 프레임워크가 아닌 오직 view 만 담당하는 라이브러리 이므로 기타 기능은 직접 구현해서 사용해야 한다 컴포넌트 기반이다 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화 함으로써 DOM처리 횟수를 최소화하고 효율적으로 진행한다 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있다 컴포넌트(component)의 개념 앱을 이루는 최소한의 단위이다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 말한다 컴포넌트를 view로 보여주는 것을 렌더링이라 하며 컴포넌트를 실제 페이지에서 렌더링 할 때는 분리된 두 가지 절차를 따른다 먼저 문자열 형태의 HTML 코드를 생성한 후 특정.. 2022. 5. 24. 자바스크립트[기초] Ajax Ajax 란? 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API XMLHttpRequest 객체를 기반으로 동작한다 [ Ajax 가 나오기전] 완전한 HTML을 서버로부터 전송 받아 웹 페이지 전체를 처음부터 다시 렌더링 하는 방식 [ Ajax ] 서버로 부터 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹 페이지를 변경할 필요가 없는 부분은 다시 렌더링 하지 않고 변경이 필요한 부분만 부분적으로 렌더링 하는 방식 변경할 필요가 없는 부분까지(HTML 전체) 처음부터 렌더링 한다 변경할 부분을 갱신하는데 필요한 데이터만 서버로 부터 전송 받는다 이로 인해 화면 전환이 일어나면 화면이 .. 2022. 5. 1. 이전 1 다음 728x90
