본문 바로가기

전체 글80

[리액트 숙련주차] 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.
[스터디] Week 1 - 5 (230623) 오늘 한 것 - 바닐라 JS 강의 완강 사담 기한은 토요일까지긴 하지만 최대한 마무리해두고 싶어서 열심히 완강했다. 완강하려고 너무 휙휙 넘겨가며 들어서 내용 정리는 필요하지만,,, 그런데 나도 강의를 개정 년도인 21년에 들었었는데, 그때는 개정 전이였는지 내가 들었던 내용과 조금 차이가 있었다. 사이트 확인해보니 나는 2월인가 들었는데 6월에 개정되었다고 한다. 내가 들었을 때는 과정 안에 css도 포함되어있어서 완성작이 나왔었는데, 개정 강의는 정말 딱 기능 구현 까지만 있어서 조금 아쉬웠다. 오늘 마저 강의 내용 정리하고, css도 써서 예쁘게 완성작 만들어 볼 예정 이번주 스터디가 마무리되면 다음 주차에 진행할 스터디도 의논해봐야 하는데 어떤 걸 하면 좋을지 고민된다. 2023. 6. 24.
[리액트 입문주차] 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.

티스토리툴바