본문 바로가기

입문주차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.

티스토리툴바