본문 바로가기

react29

[리액트 입문주차] 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.
[TIL] 230623 - 주특기 주차 시작, 리액트 강의 수강, 코드리뷰 특강, 스터디 오늘 한 것 - 주특기 주차 발제 - 리액트 입문 강의 수강 - 코드리뷰 특강 - 스터디 2023.06.23 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리] - [리액트 입문주차] 정리 (작성중) [리액트 입문주차] 정리 (작성중) 1-1 오리엔테이션 1. React란 무엇인가 - UI를 빌딩하기 위한 자바스크립트 라이브러리 - SPA 기반의 프론트엔드 프레임워크 중 하나 - 컴포넌트 단위의 독립적인 블록을 이용한 방법 - AngularJS, VueJS jwc406.tistory.com 2023. 6. 23.