기초 메모지

리덕스(Redux) 리덕스(Redux)는 상태 관리를 용이하게 하기 위한 라이브러리입니다. 상태(State)를 컴포넌트 별로 관리하지 않고 전역적으로 사용할 수 있어 상태 관리가 편리합니다. 용어 및 개념 1. 액션(Action) - 액션(Action)은 어떤걸 하는지에 대한 지시가 있는 객체로 `type` 속성을 필수적으로 가지고 있어야 합니다. 2. 액션 생성 함수(Action Creator) - 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해 사용합니다. - 액션을 언제든지 사용할 수 있도록 만들어주는 함수 입니다. - 액션을 만드는 함수로 파라미터를 받아와서 액션 객체 타입으로 만듭니다 3. 리듀서(Reducer) - 액션을 발생시켜 스토어의 상태(State)를 변화 시킬 때 액션에 따라 기존 상태..

속성(Propertys == Props) 속성(Props)은 하위 컴포넌트(Component)에 전달된 값을 그대로 표현할 때 사용합니다. 같은 컴포넌트지만 내용이 다른 양식(Template)을 만들 때 사용합니다. 속성 값이 달라져도 컴포넌트를 수정할 필요가 없습니다. 속성은 읽기 전용(Read Only)으로 속성 값이 변하지 않습니다. function App() { return ( ); } 알맞은 DOM 태그에 중괄호(JSX 또는 TSX 문법)를 넣어 지정 된 속성 값을 표시합니다. function Profile(Props) { return ( {Props.Name} {Props.Email} {Props.PhoneName} ); } 상태(State) 상태(State)는 컴포넌트에서 관리되고 상태가 변..

리덕스(Redux)를 사용하는 이유 리덕스는 상태(State) 관리를 용이하기 위해서 사용합니다. 미들웨어(Middleware)를 사용하는 이유 액션(Action)이 리듀서(Reducer)를 변화시키기 전 추가적인 작업을 위해서 사용합니다. 리듀서는 순수 함수로 작성해야하기 때문에 리듀서 내부에서 비동기 작업 등 순수 함수를 훼손하는 작업이 금지 됩니다. 미들웨어가 작업한 내용을 리듀서에 인자로 전달하면 리듀서는 매개 변수로만 새로운 상태를 반환하므로 순수 함수가 될 수 있습니다. 정리 미들웨어는 리듀서가 순수 함수(어떤 외부상태에 의존하지도 않고 변경하지도 않는, 부수효과가 없는 함수)를 유지하도록 비동기 등 순수 함수를 훼손하는 작업을 수행하여 전달하는 역할을 합니다.

리액트(React)에서 리덕스(Redux)를 사용하는 이유 State(상태)를 편리하게 관리 이용하기 위해서 입니다. 리액트(React)는 가상 돔(Virtual DOM)을 이용하므로 컴포넌트(Component == Function)들이 계층(Tree)으로 존재합니다. 속성(Props)는 일방적으로 상위 컴포넌트에서 하위 컴포넌트로 값을 전달합니다. 계층(Tree) 구조인 DOM 특성 상 최상위 노드에서 최하위 노드까지 접근하려면 경로상 모든 노드를 방문해야 합니다. index에서 Props로 TodoList 컴포넌트로 데이터를 전달하려면 index > App > Body > TodoList 순으로 접근해야합니다. 앞서 말씀 드렸지만 계층 구조이므로 index에서 TodoList로 바로 전달할 수는 없습..

자바스크립트 프로젝트 명령어 npx create-react-app [프로젝트_이름] 타입스크립트 프로젝트 명령어 npx create-react-app [프로젝트_이름] --template typescript ※ 프로젝트 이름 규칙 : 대문자, 공백 제외 'create-react-app' 패키지가 업데이트 되면 다음과 같은 메시지가 표시되면서 명령어가 듣지 않습니다. 프로젝트 생성할때 마다 'create-react-app' 패키지를 최신버전으로 설치하면 됩니다. npx create-react-app@latest [프로젝트_이름] [--template typescript]