Front-End18 Redux 개념이해 개념 리덕스는 리액트에서 사용하기위해 만든 상태 관리 라이브러리이다. 상태 관리에 있어서 불필요한 리렌더링 부분을 없애기 위해서 컴포넌트 외부에서 상태관리 로직을 처리한다. 리덕스를 사용하면 스토어에서 모든 상태 관리가 일어나는데, 상태에 어떤 변화를 일으킬 때 액션을 스토어에 전달하고, 그 과정을 디스패치라고 한다. 스토어가 액션을 받으면 리듀서가 액션을 기반으로 상태를 어떻게 변경할지 정하고, 액션을 처리하면 새 상태를 스토어에 저장한다. 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에게 바로 전달하고, 이때 부모 컴포넌트로 props를 전달하는 작업은 하지 않고, 리덕스에 연결하는 함수를 사용해서 컴포넌트를 스토어에 구독시킨다. 용어 스토어: 앱의 상태 값들을 저장하고 있다. 액션.. 2022. 5. 1. Component 실제 사용방법 import: (ES6문법), 모듈을 불러오는 키워드 import MyComponent from ‘./MyComponent’; export: 모듈 내보내기 export default MyComponent; props 부모컴포넌트에서만 설정할 수 있는 데이터 값. 자식에서는 읽기전용. -> props 기본 값 설정: defaultProps static defaultProps = { name: ‘기본 이름’ } -> props 검증: propTypes & 필수 propTypes 설정 import PropTypes from ‘prop-types’; //import 추가 //name props 타입을 string으로 설정 static propTypes = { name: PropTypes.string, //nam.. 2022. 5. 1. Container 란? Container도 react 패키지의 Component를 물려받는 컴포넌트의 일종이다. ->Container는 앱의 상태를 관리하기 때문에 앱의 상태가 자주 바뀔수록 그에 따라 빈번하게 업데이트가 일어난다. -> Redux와 소통하면서 앱의 상태를 제어하는 컴포넌트. (예시) 리덕스를 사용할 때에는 특히 Container와 Component를 구분해주는 게 좋다. Container는 앱의 상태를 관리하기 때문에 앱의 상태가 자주 바뀔수록 그에 따라 빈번하게 업데이트가 일어난다. 그래서 필요없는 부분에 업데이트가 일어나지 않게 하려면 Container과 Component를 구분해주어야 한다. 리액트는 컴포넌트 단위로 업데이트를 하기 때문이다. Container가 업데이트되어도 그 아래 Component와.. 2022. 5. 1. Component의 특징 캡슐화 Component는 메인 어플리케이션과 완전히 분리되어 작성되어져야 한다. -> 재사용, 테스트 가용성, 신뢰성 (Component 수정시, 어플리케이션의 나머지 부분에 영향을 미치는 것을 신경쓰지 않아도 된다.) 확장성 + 재사용성 Component는 확장이 가능해야 한다. (DOM객체처럼) -> 이미 있는 기능 다시 사용 용이 결합성 컴포넌트의 조합으로 하나의 어플리케이션을 만들 수 있다는 점이 있다. 클래스형컴포넌트와 함수형 컴포넌트 (1) 클래스형 컴포넌트 -> state를 넣을 수 있다. -> props 를 입력으로 받는 생성자(constructor) 를 사용하는것이 좋다. ( super() 호출, 생성자 안에서 props호출: super(props) .. 2022. 5. 1. React의 특징 Virtual DOM (추상적개념) -> 데이터를 업데이트하면 전체 UI 를 Virtual DOM에 리렌더링한다. -> 이전 Virtual DOM 에 있던 내용과 현재 내용을 비교한다. -> 바뀐 부분만 실제 DOM 에 적용한다. : DOM 업데이트를 추상화함으로써 DOM 처리 함수를 최소화하고 효율적으로 진행한다. ( DOM: 문서 객체 모델- HTML, XML 문서를 처리하는 API ->문서의 구조적 형태를 제공해서 자바스크립트와 같은 스크립트 언어를 사용해서 문서 내용과 시각적 표현을 수정할 수 있다.) Component-Based 컴포넌트 기반으로 작업하면 UI를 독립적으로 재사용할 수 있다. -> 프로젝트 내에서 어디든지 사용할 수 있고, 수정이 용이하다. JSX (Javascriptxml)(J.. 2022. 5. 1. React routing 방법 요약 페이지 라우팅 방법 header, body, footer 중 라우팅 하고자 하는 곳에 (라우팅되는 대상) import 추가 import { BrowserRouter, Route } from "react-router-dom"; import LoginPage from '../../containers/loginPage/LoginPage'; 코드 추가 // 만약, Route경로가 여러개라면 import 에 Switch 컴포넌트 추가, 컴포넌트로 감싸기. 버튼으로 이동 시, Sign up 과 같이 href="경로" 적어주기. Ref. 모달 로그인 참고 페이지 https://material-ui.com/components/dialogs/ -> form dialog 사용 2022. 5. 1. 이전 1 2 3 다음
