react29 [리액트 숙련주차] 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. 이전 1 2 3 4 5 6 7 8 다음
