FE/React15 [React] react-router(useNavigate/nested routes) 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. router npm install react-router-dom@6 # router 설치 import { } from 'react-router-dom' 설치 후 import 후 사용합니다. Routes 태그 안에 Route 태그로 경로 지정하고 element={} 안에 내용이 들어가며, Route 태그 하나 당 페이지 하나로 생각하고 작업하면 됩니다. 코드를 더욱 간단하게 작성하기 위해 페이지를 따로 폴더로 구분해 컴포넌트로 불러와 코드를 작성하였습니다. useNavigate import { useNavigate } from 'react-router-dom' // 아래는 내용 function App() { c.. 2022. 7. 9. [React] props와 map 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. 서론 취업 후 10개월을 달려가고 있습니다. 회사에 적응하고 학사 취득, 코딩테스트, 정보처리기사 공부 등 다양한 공부를 하느냐 잠깐 여유가 생긴 지금, 취업 준비 이후로 리액트를 약 1년만에 다시 잡는 것 같습니다. 사실 올해 2월 잠깐 리액트 네이티브를 공부했었지만, 그래도 거의 초기화 되었다고 봐도 무방하며, 어차피 정보 전달하는 블로그가 아닌 공부와 기록 목적의 블로그이기 때문에, 중복되는 내용일지라도 공부 내용을 포스팅 하고자 합니다. props 상품 이미지 세 개를 배열하는 중이고, 반복되는 코드를 컴포넌트로 만들어 사용했습니다. 그리고 이때, state 전송을 위해 사용하는 것이 바로 props입.. 2022. 7. 6. [React] props 대신 Redux + Redux 복습 Redux npm install redux react-redux redux를 사용하는 이유? 속된 말로 props 쓰기 귀찮아서입니다. Redux 세팅 1. index.js에 import {Provider} from 'react-redux'; 2. App을 Provider로 묶어주기 3. store란 변수에 state 담기 4. Provider에 props 전송 + 수정 import {Provider} from 'react-redux'; 밑에 추가해주기 JS 파일에 가져오기 1. export default () 대신 export default connet()() 사용 2. connet를 사용하기 위해서, 위에 import {connet} from 'react-redux'; 입력 3. function으로 .. 2021. 8. 15. [React] React에서의 Ajax Ajax Ajax: 서버에 새로고침 없이 요청 할 수 있게 도와주는 것. 요청의 종류에는 여러가지가 있습니다. 이건 제가 예전에 인프런 무료 강의에서도 작성한 내용인데요. 1. GET 요청 주소창에 URL 때려 박는 요청 특정 페이지 / 자료 읽기 2. POST 요청 서버로 중요 정보 전달 아이디와 비밀번호 같이 조금 숨겨서 전달할 때 Ajax 사용하는 방법? 1. jQuery 설치 후 $.ajax() 2. axios 설치 후 axios.get() 3. 자바스크립트에서 fetch() npm install add axios 이번에도 똑같이 라이브러리 설치 후 import로 axios 추가해주면 됩니다. axios.get(URL).then().catch() then() 안엔 성공하면 실행할 코드를 작성하는 .. 2021. 8. 12. [React] React 스타일 - Style-components과 SASS Style-components npm install style-components # 설치 import로 'styled-components'를 불러와 사용할 수 있게끔 세팅을 끝냅니다. 변수 = style.태그명 SASS npm install node-sass # 설치 1. scss 파일 생성 후, import로 가져오기 2. 변수에 데이터를 저장해서 쓰자 3. nesting 문법 4. 복붙 말고 @extend 5. @mixin 함수(), @include 함수() @mixin 함수()를 위에다 작성하고, 아래에 @include 함수()로 불러와 줘야 합니다. 2021. 8. 11. [React] Router 설치 및 환경 설정 Router npm install react-router-dom # react router 초기 세팅 여기서, BrowserRouter 대신 HashRouter로도 입력이 가능한데, 둘의 기능은 같으나 차이점이 뭐냐하면, HashRouter의 경우, 주소 뒤에 #이 붙는데(ex) localhost:3000/#/), # 뒤에 적는 것은 서버로 전달 X 즉, 라우팅을 리액트가 아닌 서버에 전달할 수 있어서 위험하단 이유 때문에 비교적 안전하게 라우팅을 할 수 있다는 차이점이 있습니다. 지난번 포스팅 때엔 제가 Route에 대해 잘 모르고 무작정 공부한 탓에, Route에 exact를 붙이고, 왜 붙여야 하는지에 대해선 언급이 없었는데요. Route에 경우, path 뒤에 일치하는 게 있으면 전부 화면에 출력.. 2021. 8. 10. 이전 1 2 3 다음
