React
-
Lifecycle Hook과 useEffectReact 2022. 3. 18. 19:56
라이프스타일이란 컴포넌트의 인생이라고 한다. 등장하고 업데이트(재렌더링)되고, 퇴장하는 이런 것을 뜻한다. 이런 중간중간에 Hook을 걸 수 있는데, 예를 들면, 생성되기전에 이것 좀 해줘! 하고 훅을 걸거나 퇴장하기 전에 이거하고 퇴장해줘 이렇게 훅을 걸 수 있다. 이런 식으로, 컴포넌트의 인생 중간중간에 뭔가 명령을 주는 것을 Hook라 한다. 간단히 알아보자. class 컴포넌트들만 사용가능하며, class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 Mount 되고나서 실행할 코드 } componentWillUnmount(){ //Detail2 컴포넌트가 Unmount 되기전에 실행할 코드 } } 위의 두 함수가 가..
-
sass에 대해React 2022. 3. 17. 15:56
일단 node-sass를 설치하고 세팅해보자. 터미널에 npm install node-sass //혹은 yarn add node-sass 브라우저는 sass문법을 몰라서 sass로 작성한 파일을 다시 css로 컴파일을 해야한다. 컴파일하는 라이브러리가 node-sass가 된다. 그 다음, Detail.scss라는 파일을 만들고 Detail.js에 import만 잘하면 연결 성공이다. import './Detail.scss'; scss를 쓰는 이유는 다음과 같다. $메인칼라 : #ff0000; //$변수명 : 넣을값 .red { color : $메인칼라; } 이렇게 변수 문법을 사용가능하고, @import 파일경로를 사용할 수 있다. 예를 들면, reset.scss라는 리셋파일을 만들어놓고 제작중인 scs..
-
styled-componentsReact 2022. 3. 17. 02:06
component가 많아지면 css 작성시에 고민이 많아진다. 예를 들면, 실수로 class를 중복으로 이름을 만들거나 한다. 그래서 class 선언없이 컴포넌트에 css를 직접 장착하는 것을 말한다. css in js라고 한다. 하는 방법은 터미널에 npm install styled-components //혹은 yarn add styled-components 를 입력해준다. 사용법은 먼저, 해당 js상단에 import styled from 'styled-components'; import를 해온다. 그 다음에 메인 function밖 상단에 let 박스 = styled.div` padding : 20px; `; let 제목 = styled.h4` font-size : 25px; `; function De..
-
여러 페이지 만들기 router활용React 2022. 3. 16. 13:56
지금까지 /detail하나만 상세페이지로 만들었는데, 이제는 /detail/0 으로 접속하면 0번째 상품을 /detail/1 로 접속하면 1번째 상품을 /detail/2 로 접속하면 2번째 상품을 보여주게 만들어보자. Route를 path경로를 바꿔가며 만들 필욘없고, 비슷한 Route가 있으면 :id를 이용해서 조정할 수 있다. :은 아무 문자가 오던간에 페이지로 이동시켜달란 URL작명법이다. //id는 파라미터라 그냥 id라 적은거임 아무이름으로 적어도 상관없음 그런 다음, detail페이지에 라우터의 useParams훅을 이용해보면 import React, {useState} from 'react'; import { useHistory, useParams } from 'react-router-dom..
-
Router의 Link, Switch, historyReact 2022. 3. 15. 13:45
앞과 같이 상세페이지를 만들었다. 상품명 상품설명 120000원 주문하기 이렇게 긴 상세페이지를 component화 해서 함수로 만든 후, 한단어로 쓸 수 있다. function Detail() { return ( 상품명 상품설명 120000원 주문하기 ) } //function App밖에 이렇게 만들고, 상세페이지에 Detail() 쓰면 된다. 그리고 다른 파일로 빼서 만들 수도 있다. 파일 이름을 Detail.js로 만든 후, 컴포넌트 파일을 만들 땐 import React를 해와야 한다. import React, {useState} from 'react'; function Detail() { return ( 상품명 상품설명 120000원 주문하기 ) }; export default Detail; 이..
-
Router의 기본React 2022. 3. 15. 13:22
router는 페이지를 나누는 것을 말한다. 더 정확히 얘기하면 라우팅이라고 한다. 라우팅은 터미널에 npm install react-router-dom@5 //yarn add react-router-dom@5 를 써주면 된다. 그런 다음, 세팅을 해줘야 한다. index.js로 들어가서 import를 해줘야한다. import { BrowserRouter } from 'react-router-dom'; 이렇게 적어준다. import시 경로에 ./가 없으면 대부분 라이브러리 이름이다. 그러고index.js에서 ReactDOM.render( , document.getElementById('root') ); 이렇게, 로 를 감싸주면 세팅이 끝난다. 그리고 HashRouter가 있는데 Browser자리에 다 H..
-
import / exportReact 2022. 3. 14. 13:41
어레이가 너무 길때 다른 파일에 어레이를 담고 그 파일에서 꺼내오게 할 수 있다. 간단하게, 문법을 설명해보면, 파일을 쪼갤 때 export default를 사용한다. 내보내기라고 부른다. 즉, 내보내긴 export default 변수명 이렇게 사용한다. 그리고 가져오기는 import 변수명 from 경로 이렇게 사용한다. 예를 들면, var name = 'Kim'; //이 변수가 유용해서 내보내고 싶으면 export default name //이렇게 적으면 이 변수를 뱉는거라 다른 파일에서 가져다 사용할 수 있다. import {name} from './data.js'; //가져오기는 import 작명 from 경로로 사용한다. 변수를 가져올 땐 변수를 import에 써야한다. //위처럼 import해..
-
React의 bootstrap과 img관리React 2022. 3. 14. 10:30
리액트에선 bootstrap가 따로 있다. 그래서 npm install react-bootstrap bootstrap@5.1.3 //혹은 yarn을 사용한다면 yarn add react-bootstrap bootstrap@5.1.3 이런 식으로, bootstrap을 깔아서 사용할 수 있다. 그러고 index.html에 을 써줘야 모든 기능을 다 이용할 수 있다. 사용할 땐 import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap'; //리액트 상단에 이렇게 모두 inport해줘야 가능함 (대문자들은 다 import하기) React-Bootstrap Home Link Action Another action Something Separated..