Google DSC Sookmyung

1. styled-components (링크) React에서 스타일링을 하는 방법은 여러 가지가 있습니다. 그 중에서도 styled-components는 일명 CSS in JS 기술의 일종으로, JavaScript 안에 CSS를 작성하는 것을 의미합니다. styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리입니다. 그래서 이번 스터디에서 한번 사용해보기로 결정하였습니다! 일반 CSS와의 차이 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에 import해서 사용하는 것입니다. 우리가 HTML 문서를 작성하고 .css 파일을 작성하는 것과 똑같습니다. 또는 CSS 클래스 중첩 방지를 위해 .modul..

Redux Toolkit (RTK) The official, opinionated, batteries-included toolset for efficient Redux development => Redux Toolkit은 Redux를 더 쉽게 사용하기 위해 만들어졌다. 1) 설치 # NPM $ npm install @reduxjs/toolkit # Yarn $ yarn add @reduxjs/toolkit 2) RTK method 1. createAction 기존 Redux에서 action을 정의하기 위해 action type 상수와 action creator 함수를 각각 선언해야 했지만 createAction은 이 두 선언을 하나로 결합해 준다. createAction은 action type을 단일 인..

11 폼 1) 폼이란 무엇인가? 사용자로부터 입력을 받기 위해 사용한다. 텍스트, 체크박스, 셀렉트 등 사용자가 무언가 선택을 해야 하는 것을 모두 폼이라고 한다. 2) 제어 컴포넌트 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트이다. 즉, 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트이다. function NameForm(props) { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); } const handleSubmit = (event) => { alert('입력한 이름: ' + value); event.preventDefault(); } ret..

Redux 구성 요소 store: 애플리케이션의 상태 저장, 내에 Reducer 함수 존재 Dispatch: Ruducer 함수에게 Action 송신 Action: 발생된 이벤트와 API로서의 데이터 수신 등 상태를 갱신하기 위한 정보를 담은 object, Dispatch를 통해 Action을 Reducer로 보낼 수 있음 Reducer: Dispatch를 통해 받은 Action을 토대로 state를 modify, 갱신, 변경할 수 있는 유일한 함수 View: 애플리케이션의 유저 인터페이스(UI) Setup npm i react-redux react-router-dom Connecting the Store store.subscribe(): 변경 상태를 알려줌 store.js 작성 import { crea..

Event의 정의 및 Event 다루기 Event: 특정 사건을 의미 (ex. 사용자가 버튼을 클릭한 사건) camelCase: 첫글자는 소문자로 시작하되, 중간에 나오는 새로운 단어의 첫글자는 대문자로 표기 Event Handler(Event Listener): 어떤 사건이 발생하면, 사건을 처리하는 역할 Event Handler 정의 방법 함수 안에 함수로 표기 arrow function을 사용하여 정의 Argument(Parameter): 함수의 주장할 내용, 함수에 전달할 데이터 bind 사용 코드 this.handleConfirm = this.handleConfirm.bind(this); handleConfirm() { this.setState((prevState) => ({ isConfirme..

1. Vanilla ToDo * 기능: 내용을 작성하고 Add 버튼을 누르면 ul 태그가 아래에 추가되는 투두리스트 index.html To Dos Add index.js import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO"; // Reducer: modify state const reducer = (state = [], action) => { /..

Hook이란? 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행할 수 있도록 만들어진 기능 훅을 통해 함수 컴포넌트에서 클래스 컴포넌트의 기능을 동일하게 구현 가능 이름은 모두 use로 시작 useState() 함수 컴포넌트에서 state를 사용하기 위한 훅 (원래는 클래스 컴포넌트에서만 제공) 변경하고자 하는 변수 각각에 대해 set 함수를 따로 생성 *사용법: const [변수명, set함수명] = useState(초깃값) import { useState } from "react"; export default function Counter(props) { const [count, setCount] = useState(0); return ( 총 {count}번 클릭했..

0. Redux의 핵심 개념 Store 상태가 관리되는 오직 하나의 공간 컴포넌트와는 별개로, 스토어 안에 앱에서 필요한 상태를 저장 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근 getState(): 현재 state를 가져오는 메소드 subscribe(): 변화를 감지하는 메소드 Action 앱에서 스토어에 운반할 데이터 객체 형식 { type: 'ACTION_CHANGE_USER', // 필수 payload: { // 옵션 name: 'myname', age: 25 } } Reducer 데이터를 변경하는 함수 Action -> Reducer -> Store Action을 Reducer에 전달하기 위해서는 dispatch() 메소드 사용 dispatch(): Reducer에게 보내는 메시지 Redu..

4 엘리먼트 렌더링 1) 엘리먼트에 대해 알아보기 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록으로 즉, 리액트 앱을 구성하는 요소를 의미한다. 엘리먼트는 원래 웹사이트에 대한 모든 정보를 담고 있는 객체인 DOM(Document Object Model)에서 사용하는 용어이다. 실제 브라우저 DOM에 존재하는 엘리먼트는 DOM 엘리먼트, 리액트의 Virtual DOM에 존재하는 엘리먼트가 리액트 엘리먼트이다. => 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현으로 볼 수 있다. 리액트 엘리먼트는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 자바스크립트 객체 형태로 존재한다. Virtual DOM은 변경된 부분을 계산하고 해당 부분만을 다시 렌더링한다. 엘리먼트는 불변성을 가져, ..

1 React 1) 리액트는 무엇인가? A JavaScript library for building user interfaces 라이브러리: 자주 사용되는 기능들을 정리해 모아 놓은 것 사용자 인터페이스(User interface, UI): 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 입력과 출력을 제어해 주는 것 ex) 버튼, 텍스트 입력창 2) 프레임워크 vs 라이브러리 프레임워크: 프로그램에 흐름에 대한 제어 권한을 프레임워크가 가지고 있음 라이브러리: 개발자가 필요한 부분만 필요할 때마다 사용하는 형태 3) 리액트의 장점 빠른 업데이트 & 렌더링 속도 - Virtual DOM: 가상의 돔, 빠른 업데이트를 위해 React에서 사용함 - DOM(Document Object M..