전체 글
-
[JavaScript] 간단한 보이기, 숨기기 기능 구현📌 JavaScript 2022. 9. 30. 00:56
간단하게 state를 사용해서 보이기, 숨기기 기능을 만들어 볼거다. 초기 구성 컴포넌트를 생성하여 단순하게 버튼과 내용을 만들었다. const TestShowHide = () => { const css = { width: 100, height: 90, backgroundColor: 'tomato', margin: 20, }; return ( 보이기 내용 ); }; export default TestShowHide; 보이기 이제 상태에 따라 보여주기 기능을 만들 것이다. 처음 시작할 때 내용을 숨겨주고, 보이기 버튼을 클릭하면 내용이 나오도록 할거다. import React, { useState } from "react"; const TestShowHide = () => { const [isShow, s..
-
[React] Todolist 만들기 정리(3)📌 React 2022. 9. 29. 01:36
Context 를 만들어주었으니, 이제 Context 와 연동을 하여 기능을 구현하자. TodoHead.js Context 에 있는 state 를 받아와서 렌더링을 하고, 필요한 상황에는 특정 액션을 dispatch 하면 된다. TodoHead 에서는 done 값이 false 인 항목들의 개수를 화면에 보여준다. 추가로 날짜가 보여지는 부분을 작업해준다. import React from 'react'; import styled from 'styled-components'; import { useTodoState } from '../TodoContext'; const TodoHeadBlock = styled.div` padding-top: 48px; padding-left: 32px; padding-rig..
-
[React] Todolist 만들기 정리(2)📌 React 2022. 9. 28. 23:41
Todolist 만들기 정리(1) 에 이어서 작업을 할 예정이다. 이전 게시글에는 UI 작업이었다면 이번 편은 기능적인 것을 보여줄 것이다. 리듀서 만들기 useReducer 를 사용하여 상태를 관리하는 TodoProvider 라는 컴포넌트 생성한다. src/TodoContext.js import React, { useReducer } from 'react'; const initialTodos = [ { id: 1, text: '프로젝트 생성하기', done: true }, { id: 2, text: '컴포넌트 스타일링하기', done: true }, { id: 3, text: 'Context 만들기', done: false }, { id: 4, text: '기능 구현하기', done: false } ]..
-
[React] Todolist 만들기 정리(1)📌 React 2022. 9. 28. 00:04
벨로퍼트님의 https://react.vlpt.us/mashup-todolist/01-create-components.html 보고 직접 구현했던 과정들을 정리하려고 한다. cra설정 yarn create react-app react-todolist 이번 프로젝트에서 필요한 라이브러리 react-icons 와 styled-components 를 설치. $ cd react-todolist $ yarn add react-icons styled-components 컴포넌트 정리 TodoProvider useReducer 를 사용하여 상태를 관리하는 컴포넌트이다. TodoTemplate 투두리스트의 레이아웃을 설정하는 컴포넌트이다. 페이지 중앙에 그림자가 적용된 흰색 박스를 보여준다. TodoHead 오늘의 날..
-
[React] Context API📌 React 2022. 9. 27. 23:20
Context API 활용한 상태관리를 작업 중에 개념 정리의 필요성을 느꼈다. Context React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법. 사용하게 되면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다. 사용하기 전에 고려할 것 context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 써야한다. https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org
-
[React] 데이터를 저장하는 방법📌 React 2022. 9. 27. 20:46
변수에 데이터 넣기 변수( const, let )에 데이터를 넣는다. 매번 렌더링 될 때마다 다시 만들어진다. useState 1번째 마운트에서 초기화 됨. state 값이 변경되면 리렌더링 발생. ✨ react에서 리렌더링이 일어나는 경우? props, state가 변경되었을 때. useRef 1번째 마운트에서 초기화 됨. 값을 변경해도 리렌더링이 되지 않음. 더 나아가기 https://ui.toast.com/weekly-pick/ko_20211214
-