728x90 728x90 전체 글153 React에서 Redux 사용하기 React에서 Redux 사용하기 리액트에서 리덕스를 사용하기 위해서 redux 패키지를 설치하는데 redux만 설치하는 건 아니다. 리덕스는 리액트에서만 쓰는 게 아니고 어떤 자바스크립트 프로젝트에서도 사용될 수 있다. 리덕스는 리액트에 관해 알지도 못하고 리액트에 관심도 없다. 리덕스와 리액트 앱의 작업을 쉽게 하기 위해서 react-redux 패키지를 추가로 설치한다. npm install redux react-redux 먼저 store 폴더를 만들고 store를 정의한다. import { createStore } from 'redux'; const counterReducer = (state = { counter: 0 }, action) => { if (action.type === 'incremen.. 2023. 2. 14. Redux 작동방식 Redux 작동방식 리덕스는 애플리케이션에 있는 하나의 중앙 데이터(상태) 저장소이다. 2개 이상의 저장소를 가지지 않고 오직 한 개의 저장소를 가진다. 그 저장소에 인증 상태, 테마, 입력 상태 등 무엇이든 저장할 것이다. 그러면 관리가 어려울 것 같은데 그 저장소 전체를 항상 직접 관리할필요가 없다. 궁극적으로는 그 저장소에 데이터를 저장해서 우리는 컴포넌트 안에서 그걸 사용할 수 있다. 저장소에 있는 상태가 변경되면 우리의 컴포넌트에서 그걸 인지해서 그에 맞춰 대응하고 UI를 업데이트하기 위해서 중앙 저장소에 대한 구독을 설정한다. 컴포넌트가 저장소를 구독하고 데이터가 변경될 때마다 저장소가 컴포넌트에 알려주게 된다. 또한 그 데이터를 변경할 방법이 필요한데 컴포넌트는 저장소에 있는 그 데이터를 직.. 2023. 2. 13. Redux의 개념과 사용하는 이유 리덕스의 개념과 사용하는 이유 리덕스란? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다. 리덕스는 다수의 컴포넌트나 심지어는 앱 전체에서 state를 관리하도록 도와준다. 우리는 상태를 세 가지로 구분할 수 있는데 로컬 상태, 크로스 컴포넌트 상태,앱 와이드 상태이다. 로컬 상태 (Local State) 로컬 상태는 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태이다. 예를 들면 사용자 입력을 받고 useState를 사용해서 그 입력을 state 변수에 저장하고 토글 버튼을 클릭하면 세부 정보가 표시되고 다시 클릭하면 감춰지게 되는 경우이다. 보통은 useState를 사용해서 컴포넌트 안에서 로컬 상태를 관리하고 약간 복잡하다면 useReducer를 사.. 2023. 2. 12. 원티드 프리온보딩 인턴십 (2월) 지원 에세이 원티드 프리온보딩 인턴십 (2월) 지원 에세이 (1) 지원하고 싶은 참가기업은 어디인지 개발자로 취업할 때 어떤 기술 스택을 사용하는지도 물론 중요하지만, 도메인도 중요하다고 생각한다. 일단 관심 있는 분야를 개발하게 된다면 더 애정을 가지고, 더 재미있게 개발할 수 있을 것이다. 나는 언젠가는 교육자의 길도 걷고 싶고 교육 분야에 관심이 있는 편이다. 참가기업에 에이블런은 비전문가를 위한 데이터 활용 교육, 앤드스페이스를 서비스한다고 하는데 내가 예전에 생각해본 창업 아이디어들이라서 흥미가 생겼다. 개발뿐만 아니라 교육 관련 프로세스도 경험하고 싶다. (2) 프리온보딩 인턴십에서 본인이 얻고 싶은 것 이번 과정을 통해서 얻고 싶은 것은 2가지이다. 첫 번째 리액트에 대한 기본기와 프론트엔드 개발자로서의.. 2023. 2. 10. React 유효성 검사 유효성 검사의 시점 개발자의 시각에서 폼은 그 입력은 넓고 다양한 상태를 나타낼 수 있어서 굉장히 복잡할 수 있다. 하나 이상의 입력 값이 모두 유효하지 않을 수도 있으며 모두 유효할 수도 있고 심지어는 서버로 요청를 보낸 뒤에 특정 값이 사용 가능한지 비동기 유효성 검사를 해야해서 상태를 알 수 없을 수 있다. 그러면 언제 유효성을 검사를 해야할지가 문제이다. 1. 폼이 완전하게 제출되었을 때 사용자 입력의 유효성을 검증할 수 있습니다 폼이 완전하게 제출된 뒤에 유효성 검증을 할 때에는 사용자가 입력하는 중에 완전히 입력하지도 않았는데 입력이 틀렸다고 하지 않을 수 있다. 사용자가 입력을 마칠 때 까지 기다린 뒤에 에러를 보여주게 되므로 불필요한 경고를 줄일 수 있다. 단점은 피드백이 늦어 사용자가 값.. 2023. 2. 9. React 사용자 입력 다루기 form과 input을 다루는 기본적인 방법 사용자의 입력을 받은 다음에 그 입력 값에 대한 유효성을 검증하고 필요한 경우에 사용자에게 에러 메시지를 띄울 수 있다. 먼저 사용자 입력을 가져오는 방법은 크게 두 가지 방법이 있는데 모든 키 입력마다 확인하며 이 값들을 상태 변수에 저장할 수 있고 ref를 이용하여 사용자가 값을 모두 입력했을 때 입력 값을 가져올 수도 있다. state를 이용하는 방법 import { useState } from "react"; const SimpleInput = (props) => { const [enteredName, setEnteredName] = useState(""); const onChangeHandler = (event) => { setEnteredName(e.. 2023. 2. 8. 이전 1 ··· 18 19 20 21 22 23 24 ··· 26 다음 728x90 728x90
