🍓𝗪𝗲𝗯
-
[Redux] redux 용도 및 설치방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 21. 23:12
Redux는 Context API와 비슷한 역할을 하며, 복잡한 하위컴포넌트를 만들 때 props 전송없이 바로 state 데이터 접근해서 사용할 수 있다. props전송없이도 모든 컴포넌트들이 state 사용할 수 있게 해준다. redux 용도 1. props 전송귀찮아서! 깊은 하위컴포넌트들도 props 여러번 전송없이 state를 직접 가져다가 쓸 수 있다. 컴포넌트 많은 사이트에서 편리하다! 2. 데이터 관리 용이 redux에서는 state 데이터의 수정방법을 미리 정의한다. 설치방법 1. yarn add redux react-redux 2. index.js에 다음 명령어 설치 import {Provider} from 'react-redux'; 3. 로 감싸기 Provider로 감싼 모든 컴포넌트..
-
[React] props 대신 context API 사용하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 20. 15:54
하위 컴포넌트들이 props 없어도 부모의 값을 사용가능하다. 방법 1. React.createContext() context 만들기 createContext는 같은 변수값을 공유할 범위를 생성해준다. 2. 같은 값을 공유할 HTML을 범위로 싸매기 3. useContext(범위이름)로 공유된 값 사용하기 간단한 데이터 전송은 간단한 props를 쓰고, 컴포넌트 안에 컴포넌트 안에 컴포넌트 .. 이런 경우에는 context가 도움될 수 있다. 다른 파일에 값을 공유하고 싶으면, export와 import를 사용한다. Redux라는 라이브러리 : 모든 컴포넌트파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능하다. + state 데이터 관리 기능
-
[React] Component 중첩 시 state 전달🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 19. 22:46
컴포넌트 중첩 시 state 전달 중요한 데이터들은 상위컴포넌트에 모아놓는 것이 좋다. 위에서 밑으로 데이터가 흐르기 때문이다! 밑에서 위로 데이터가 가는 건 좋지 않다. 하위까지 props로 전달했었는데 하위의 하위도 props로 전달한다. 주문하기 버튼을 누르면 재고 state에서 1을 빼려면? - 재고변경() 함수를 부모컴포넌트 App.js가 가지고 있으므로 props로 전송해줘야한다. 정리 하위 컴포넌트가 몇개든 데이터를 전송하려면 props를 쓴다. 하위 컴포넌트가 상위 컴포넌트 state 변경하려면 state 변경함수 쓴다. => 그게 상위 컴포넌트에 있으면 props로 전송한다. => 컴포넌트 개수만큼 앱이 복잡해진다. => Context API나 redux로 데이터 전송이 아니라, 부모 컴..
-
[React] Ajax란? Ajax 요청방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 19. 13:53
Ajax 서버에 새로고침없이 요청을 할 수 있게 도와준다. 서버는 누군가 페이지 요청하면 페이지를 가져다준다. 요청 2가지 방법 1. 주소창에 url 입력 => GET요청 (특정 페이지 / 자료 읽기) 2. POST (중요정보 전달) ex) 아이디, 비번 => 원래 GET/POST 요청할 때마다 항상 새로고침된다. but, Ajax는 새로고침 없이 요청할 수 있게 해준다. 사용방법 1. jQuery 설치 $.ajax() 2. axios 설치 axios.get() (리액트, 뷰에서 주로 사용) 3. 순수자바스크립트 fetch() axios 라이브러리 설치 1. yarn add axios 2. import axios from 'axios'; 3. axios.get(데이터 요청 Url) // 서버 개발자에게 ..
-
[React] 컴포넌트의 Lifecycle🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 18. 07:34
배경 컴포넌트의 인생.. 컴포넌트는 어떻게 살다가 죽을까? 생성되었다가 다른 페이지로 넘어가면 삭제되기도 한다! state가 바뀌면 업데이트(재렌더링)가 되기도 한다! 중간중간 Hook을 걸 수 있다. (삭제전에 이거 해줘! 이 컴포넌트 등장 전에 이거해줘!) => Hook으로 컴포넌트 인생 중간에 명령을 줄 수 있다. 예전에 class로 컴포넌트 만들었을 때! 주로 쓰는 라이프사이클 훅은 아래와 같았다. class Modal extends React.Component { componentDidMount() { // Modal 컴포넌트가 Mount(등장)했을 때 실행할 코드 ex) ajax 주로 사용한다 } componentWillUnmount() { // Modal 컴포넌트가 사라지기 직전에 실행할 코..
-
[React] SASS 문법 정리🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 17. 21:27
SASS란? 프로그래밍언어스럽게 작성가능한 Preprocessor로, CSS에서 변수, 연산자, 함수, extend, import를 사용 가능하다. 브라우저는 SASS문법을 모르기 때문에 SASS로 작성 파일을 다시 CSS로 컴파일해야하는데, 이 작업을 node-sass가 해준다. 설치방법 1. yarn add node-sass 2. import './파일이름.scss'; 해온다. 설치 시 생기는 버전상의 오류는 아래 게시글을 참고하면 좋다 ! 👍 2021.09.17 - [🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍] - [오류처리] node-sass 설치오류, version 문제 해결 [오류처리] node-sass 설치오류, version 문제 해결 에러 상황 1. yarn add node-sass로 설치했는데 6.0.1 버전..
-
[React] styled-components로 CSS 스타일링🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 17. 07:34
class없이 styled-components를 이용해 css스타일링하기 styled-components는 라이브러리이다. component가 많아지면 CSS 작성 고민이 많아진다. 한군데 다 만들어두면, 실수로 class명을 중복을 하기도 하고 class선언없이 CSS in JS로 컴포넌트에 CSS를 장착한다. 방법 1. yarn add styled-components를 하여 설치한다. 2. 컴포넌트에서 import 해온다. import styled from 'styled-components'; 3. 컴포넌트에 직접 스타일 넣어서 스타일링하기 let box = styled.div`css입력하듯 글자 넣는다`; let titleName = styled.h1` font-size: 25px; color: $..
-
[React] 페이지 나누기 (라우팅)🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 16. 23:15
방법 react-router-dom 라이브러리를 이용한다. 터미널에 yarn add react-router-dom명령을 입력한다. 초기세팅 1. index.js에 다음과 같이 입력한다. import { BrowserRouter } from 'react-router-dom'; .이 없이 그냥 적으면 보통은 라이브러리 이름을 의미한다. 2. BrowserRouter로 App을 감싼다. ReactDOM.render( , document.getElementById('root') ); BrowserRouter VS HashRouter 주소창은 서버에게 요청하는 곳이고, /abc로 이동해달라고 하면 리액트가 프론트 단에서 알아서 해준다. - HashRouter는 #이 추가된다. 라우팅을 좀더 안전하게 할 수 있다...