본문 바로가기

react29

[TIL] 230629 - 주특기 1주차 테스트, 리액트 숙련주차 수강, 스터디 개인공부 오늘 한 일 - 주특기 1주차 테스트 - 리액트 숙련주차 2-10 까지 수강 - 스터디 결석 개인공부 2023.06.29 - [이노베이션 캠프/[스파 2023.06.29 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리] - [리액트 숙련주차] 2-10 Lifecycle 르타코딩클럽] 강의 정리] - [리액트 숙련주차] 2-3~9 React Hooks 2023. 6. 30.
[리액트 숙련주차] 2-12~18 Redux 2-12 Redux 소개 1. 리덕스가 필요한 이유 - 리덕스란? 상태 관리 라이브러리 - useState의 불편함 : prop-driling - state를 공유하고자 할 때, 부모 관계가 아니여도 되고 중간 컴포넌트를 거치지 않아도 됨 - 자식에서 만든 state를 부모에서도 사용할 수 있게 해 줌 => 즉, 중앙 데이터 관리소 (context API vs Redux context는 상위 컴포넌트의 값 하나만 바뀌어도 하위가 모두 렌더링되어야 하는 단점 有) 2. Global state, Local state - Local state 지역 상태란? 컴포넌트에서 useState를 이용해서 생성한 state - Global state 전역 상태란? 중앙화 된 특별한 곳에서 생성됨. 중앙 state 관리소.. 2023. 6. 30.
[리액트 숙련주차] 2-11 DOM과 Virtual DOM 2-11 DOM과 Virtual DOM 1. 가상돔이란? - 리액트나 뷰는 가상돔을 사용해서 원하는 화면을 브라우저에 그려줌 - 자체적으로 효율적인 알고리즘을 사용하여 그려주기 때문에 속도가 어마어마함 2. DOM (Document Object Model) - 브라우저는 수많은 컴포넌트로 구성되어있음 -> 문서(document) - 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 함 => DOM은 엘리먼트를 tree형태(DOM tree)로 표현한 것 - 트리의 요소 하나하나를 노드라고 부르고, 해당 노드에 접근과 제어할 수 있는 API를 제공함 - API : HTML요소에 접근해서 수정할 수 있는 함수 // id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘. document.g.. 2023. 6. 30.
[리액트 숙련주차] 2-10 Lifecycle 2-10 Lifecycle 1. 생명주기란? [Mount] -> [Update] -> [Unmount] - 컴포넌트 중심 라이브러리의 집합체 - 리액트 컴포넌트에는 각각 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 존재 - 클래스형 컴포넌트에서 적용했었던 메서드들을 많이 이야기하기 때문에 많이 시간 할애 X 2. 생명주기별 메서드 1. Mount : 컴포넌트가 생성될 때 constructor 생성자 함수 컴포넌트가 맨 처음 만들어질 때 호출 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount가 준비완료 되면 호출되는, 렌더링하는 메서드 컴포넌트를 D.. 2023. 6. 29.
[리액트 숙련주차] 2-3~9 React Hooks 2-3 useState 1. useState란? const [state, setState] = useState(초기값); - 가장 기본적인 hook - 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 - 카운터, Todolist 2. 함수형 업데이트 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return currentNumber + 1 }); - 차이점 : 배치 업데이트 (state 파악하는 방법) - 함수형은 동시에 명령을 내리면 명령을 모아 순차적으로 각각 한번씩 실행해줌 - 배치(b.. 2023. 6. 29.
[리액트 숙련주차] 2-1~2 Styled Components 2-1 Styled Components (개요) 1. Css-in-JS 방식 - JS 코드 -> CSS 코드 - JS코드로 컴포넌트를 꾸미는 방식 - Styled Components 패키지 사용 2. 패키지란? - 외부에서 가져와서 사용할 수 있는 라이브러리 - 3rd party - vsCode extension -> "vscode-styled-components" 설치 -> 터미널에서 "yarn add styled-compone nts" 하여 설치 3. Styled Components 사용 - 꾸미고자 하는 컴포넌트를 Styled Component 방식으로 만들고, 스타일 코드 작성하는 방식으로 사용 // src/App.js import React from "react"; // styled-compon.. 2023. 6. 29.
[TIL] 230627 - 과제 페어 리뷰/제출, 블로그 포스팅, 스터디 오늘 한 일 - 페어 성립 후 깃허브 issue로 코드 리뷰, 과제 최종 제출 - 코드 리뷰 받은 사항 수정 - Lv.1 과제 코드 포스팅 - 스터디 발표 공부, 준비 Lv.1 과제 2023.06.27 - [이노베이션 캠프/[코드모음] 과제 & 테스트] - [과제] 투두리스트 (React, JavaScript) - Chapter 3 [과제] 투두리스트 (React, JavaScript) - Chapter 3 과제 안내 💡 Goal : My Todo List 만들기 지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다. 이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨ 학습 과제를 끝내고 나면 할 수 있어 jwc406.tistory.com https://github.com/jwc4.. 2023. 6. 28.
[TIL] 230626 - 레벨1 과제 제출, 스터디 오늘 한 일 - 리액트 입문주차 Lv.1 과제 제출 - 레포 연결, README에 컴포넌트 설명 적기 - 스터디 발표 공부, 계획, 준비 문제 & 시도 & 해결(?) 과제 제출을 위해서 깃허브 레포에 파일을 올려야 했는데, CRA로 생성한 프로젝트 폴더를 그대로 올리려고 하니 계속 문제가 생겨서 이것저것 찾아봐도 이상하게 폴더가 새로 생기거나 엉뚱한 내용만 올라가는 등 정상적으로 안됐다. 과제는 제출해야 해서 결국 그냥 깃허브에 레포 파서 클론한 다음에 냅다 복붙해서 푸시해줬다. 어찌저찌 해결은 됐지만 굉장히 찝찝했다... 옛날에 깃을 처음 배울때 잠깐 소스트리나 깃 Bash를 사용해보고, 어느 시기부터는 쭉 깃허브 데스크톱 앱을 사용했던 탓에 사실 터미널로 사용하는 방법이나 다른 방법은 잘 하지 못해서.. 2023. 6. 28.
[TIL] 230624 - 리액트 강의 수강, 스터디 2주차 발제 오늘 한 일 - 리액트 입문주차 강의 완강 - 강의 정리해서 블로그에 포스팅 - 레벨1 과제 틀 잡기, 시작 - 스터디 2주차 발제 강의 정리 2023.06.24 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리] - [리액트 입문주차] 1-5 React Component ~ 1-11 Props 추출 2023.06.24 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리] - [리액트 입문주차] State 2023.06.24 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리] - [리액트 입문주차] 불변성과 순수함수 2023.06.24 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리] - [리액트 입문주차] 컴포넌트와 렌더링 2023.06.24 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리].. 2023. 6. 28.
[과제] Lv.1 투두리스트 (React, JavaScript) - Chapter 3 과제 안내 💡 Goal : My Todo List 만들기 지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다. 이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨ 학습 과제를 끝내고 나면 할 수 있어요! 컴포넌트와 리액트 훅 요소를 다룰 수 있어요. 이벤트를 관리할 수 있어요. vercel을 이용해 리액트 사이트를 배포할 수 있어요. ⚙ features : 구현해야 할 기능이에요. UI 구현하기 Todo 추가 하기 Todo 삭제 하기 (화) 17:00까지 완료) Todo 완료 상태 변경하기 (완료 ↔ 진행중) (수)까지 17:00완료) 📌 Requirement : 과제에 요구되는 사항이에요. 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 .. 2023. 6. 27.
[리액트 입문주차] 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.

티스토리툴바