본문 바로가기

입문주차6

[리액트 입문주차] 1-17 Styling ~ 1-21 컴포넌트 분리하기 1-17 Styling, Map import React from "react"; const App = () => { const style = { padding: "100px", display: "flex", gap: "12px", }; const squareStyle = { width: "100px", height: "100px", border: "1px solid green", borderRadius: "10px", display: "flex", alignItems: "center", justifyContent: "center", }; return ( 감자 고구마 오이 가지 옥수수 ); }; export default App; 1-18 반복되는 컴포넌트 처리하기 (1) .. 2023. 6. 24.
[리액트 입문주차] 1-15~16 컴포넌트와 렌더링 1-15 Component & Rendering 1. 컴포넌트란? - 리액트의 핵심 빌딩 블록 중 하나 - UI요소를 표현하는 최소한의 단위, 화면의 특정 부분이 어떻게 생길지 정하는 선언체 2. 명령형 vs 선언형 프로그래밍 - DOM (명령형 프로그래밍) > 어떻게(How)를 중요시하여 프로그램의 제어 흐름과 같은 방법을 제시하고 목표 명시 X > 직접 DOM 객체를 조작하는 명령형 방식 - 선언형 프로그래밍 > 무엇(What)을 중요시하여 제어의 흐름보다 목적을 중요시여기는 형태 > UI를 선언하고 render함수를 호출하면 리액트가 알아서 절차를 수행해 화면에 출력해줌 >> 프론트영역이 비대해지기 때문에 생성됨 3. 렌더링이란? - 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 .. 2023. 6. 24.
[리액트 입문주차] 1-14 불변성과 순수함수 1-14 불변성 & 순수함수 1. 생명주기 Mount - Update - Unmount 랜더를 통해 떠오르고, 갱신되고 죽는 과정 2. 불변성 - 메모리에 있는 값을 변경할 수 없는 것 - 원시데이터(숫자, 문자, 불리언 등)는 불변성이 있다 - 원시데이터가 아닌 것(객체, 배열, 함수 등)들은 불변성이 없음 - 불변성이 있다는 것 => 값을 수정해도 메모리에 저장된 값에는 변화가 없음. 다시 메모리 공간 생성하여 재할당 - 불변성이 없다는 것 => 주소값을 저장하기 때문에 값을 수정하면 메모리는 그대로 있고 내용만 바뀜 3. 리액트의 렌더링 - 컴포넌트가 화면에 그려지기 위해서 렌더링을 함 - 랜더링의 조건? state 값의 변화 - state값이 변화하면 감지하여 화면을 리렌더링 해줌 - 렌더링 할지.. 2023. 6. 24.
[리액트 입문주차] 1-12~13 State 1-12~13 State(1), (2) 1. State란? - 컴포넌트 내부에서 바뀔 수 있는 값 - 변경될 수 있는 값은 state로 선언 - UI로의 반영을 위해 필요! - 랜더링을 다시 하기 위해서 2. useState 훅 - useState("초기값")의 반환값은, 초깃값을 가지는 변수와 변수를 다룰 수 있는 메서드를 가진 배열을 리턴해 줌 => const [state, setState] = useState("초기값") - hook : 특정한 기능을 수행하는 함수! 3. State 변경하기 - setValue(바꾸고 싶은 값) 예제 1 - props로 변경하기 // src/App.js import React, { useState } from "react"; function Child(props) .. 2023. 6. 24.
[리액트 입문주차] 1-5 React Component ~ 1-11 Props 추출 1-5 React Component 1. 리액트 컴포넌트란? - 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 개별적으로 살필 수 있음 - 개념적으로는 js 함수와 유사 - props 라는 입력을 받아 화면을 표시하는 React 엘리먼트를 반환 - input이 들어가면 output이 나오는 형태 - 즉 props를 입력하여 html(JSX)을 리턴하는 함수 2. 함수형 컴포넌트, 클래스형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () .. 2023. 6. 24.
[리액트 입문주차] 1-1 오리엔테이션 ~ 1-4 CRA 1-1 오리엔테이션 1. React란 무엇인가 - UI를 빌딩하기 위한 자바스크립트 라이브러리 - SPA 기반의 프론트엔드 프레임워크 중 하나 - 컴포넌트 단위의 독립적인 블록을 이용한 방법 - AngularJS, VueJS 보다 월등한 인기 2. SPA(Single Page Application) - 한 개의 페이지로 이루어진 애플리케이션, M(Multi)PA과는 상반된 개념 - 애플리케이션과 비슷한 UX를 제공해줌 - 기존 문제의 문제점 : 페이지가 갱신될 때마다 리렌더링 발생 - 특징과 장점 > 딱 한 페이지로 구성된 웹 앱 > 서버에 1회 리소스 요청 > 그 이후에는 데이터만 받아와서 기존 페이지를 수정해주는 방식 - 단점 : SEO에는 약함 SEO(Search Engine Optimization.. 2023. 6. 23.

티스토리툴바