본문 바로가기

react29

[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.