728x90 반응형 WEB49 WEB 만들기 - 27 React Hooks 로그인 페이지를 만들기에 앞서서 좀더 리액트에 대해서 설명 class 와 function의 차이 class의 기능 functional에서는 못쓰는데 16.8 hooks 업데이트로 인하여 사용을 할 수 있게되었다. 훅이 생기고 나서는 저렇게 같게 할 수 있게 되었다. 요새는 hooks를 사용 class에서는 constructor 가 먼저 실행되서 state를 먼저 부여 해주고 그다음에 render를 해주는데 이런 돔이 있는데 이 돔에다가 알맞게 넣어주는것 그래서 화면에 랜더링 해주는것 이다. 그다음에는 componentDidMount 이것을 통해서 데이터를 가져오거나 하고싶은것을 해주면 되는것이다. 무튼 저런 라이프 사이클을 가진다. 2021. 1. 24. WEB 만들기 26 - Redux UP 리덕스를 설치하는 과정을 시작 하겠습니다. Dependency들을 설치를 해야합니다. 1. redux 2. react-redux 3. redux-promis (리덕스 미들웨어) 4. redux-thunk (리덕스 미들웨어) 이렇게 4가지를 설치를 진행 할것입니다. client 쪽으로 와서 npm install redux react-redux redux-promise redux-thunk --save 한번에 4개를 설치를 해주시구요. 기본설정을 하기전에 간단히 알아봅시다. Redux Hooks 랑 Redux의 차이 3,4의 리덕스 미들웨어가 필요한 이유는 간단히 말하자면 리덕스를 잘 쓸수 있게 도와주는 역활이다. 리덕스에는 리덕스 store가 있는데 모든 state를 관리하는데 store의 state를 변.. 2021. 1. 24. WEB 만들기 25 - Redux 기초 Redux란? Redux is predictable state container for JaveScript apps 즉, 상태 관리 라이브러리 라고 합니다. state란? pros properties 줄인말 하나의 부모 컨포넌트가 있으면 자식 컨포넌트가 들어있는 상태에서 서로 컨포넌트단에서 주고 받을 때 사용 그리고 소통하는 방식이 위에서 아래로 즉 부모에서 자식으로만 보낼 수 있다. 부모 컨포넌트에서 자식으로 1이라는 vaule를 줬다면 자식안에서는 pros가 변할 수 없어서 immutable data 이다. 즉, 변하지 않는 데이터 바뀔 수 없다. 이것이 바뀌려면 부모에서 2로 내려줘야 바꿀 수 있다. state경우에는 부모에서 자식으로 주는것이 아니고 컨포넌트 안에서 데이터를 보내고 전송하려면 st.. 2021. 1. 24. WEB 만들기 24 - Antd CSS Framwork 리액트를 위한 CSS 프레임 워크 종류 는 Material UI React Bootstrap Semantic UI Ant Design Materialize 이렇게 등이 있습니다. Ant Design 여기서는 이것을 사용할것이고 중국에서 만들어졌고, 단점은 사이즈가 크다는 점이 있다. 장점은 깔끔하고 엔터프라이즈 환경에서도 어울리는 디자인을 만들 수 있는 점이 있다. 가장큰 장점으로 생각되어지는것은 쓰기가 편하다. Material UI도 좋긴하지만 배우기 어렵다고 해서 일단 이걸루 ant.design/components/overview/ Components Overview - Ant Design antd provides plenty of UI components to enrich your web appli.. 2021. 1. 22. 이전 1 2 3 4 5 6 7 8 ··· 13 다음 728x90 반응형
