본문 바로가기

reactjs

 (18)
ReactJS (8) Link ReactJS에서는 anchor을 쓰지 않고 Link를 쓰는 걸 추천한다 그 이유는 anchor은 client-side-navigation이 없기 때문인데 이걸 간단하게 설명하면 페이지를 이동할 때 새로고침이 된다는 뜻이다 새로고침을 하게 되면 속도를 느리게 만들기 때문에 좋지 않고 Link는 새로고침이 되지 않아서 페이지 이동이 빠르기 때문에 routing을 할 때 Link를 쓰는 게 좋다 그럼 Link를 쓰는 방법에 대해 알아보자 예) 이런식으로 to props를 이용해서 url을 지정해 준다 여기서 조금 더 심화로 들어가면 Link로 페이지를 이동할 때 정보를 같이 넘겨줄 수 있다 예시 코드를 보기 전에 ReactJS (7) Map 편을 이어서 코드를 짜기 때문에 우선 7편을 간략하게라도 보고 오는..
ReactJS (7) Map Array 안에 있는 정보를 펼쳐서 보여주고 싶다면 map을 사용하면 된다 예) 이렇게 coins는 array안에 각 코인 정보가 담겨있는 object들로 구성이 되어있다 그럼 이제 각 코인 정보들을 map을 사용해서 빼내보자 예) 우선 javascript 코드를 쓰기위해 {}로 열어준 후 map을 쓴다 coins.map((coin) => ()) 여기에서 coin은 바로 각각 빼내온 Object를 뜻한다 그래서 이 각각 빼내온 코인 object들을 ul (unordered list)로 만든다 여기서 기억 해야될건 ul 안에 key props를 넣어줘야 된다 key props는 고유한 id를 가져야 한다 다른 object랑 key가 중복되면 안 됨 그 후 coin.name을 통해 코인 이름들을 넣어준다 코..
ReactJS (6) useParams ReactJS (5)에서 route를 만들 때 info 변수를 만들었다 이렇게 url에서 어떠한 정보를 빼내올때 useParams를 쓰면 된다 예) 이렇게 useParams를 써준후 url은 /wef로 해주고 info 페이지로 이동후 console을 열어주면 이렇게 wef가 info 변수에 찍히는 걸 볼 수 있다 그럼 이 object안에 있는 info를 어떻게 가져올까? 이런 식으로 {변수이름}을 해주면 바로 정보를 빼내올 수 있다 필자는 typescript을 쓰기 때문에 따로 interface도 지정해 준 걸 볼 수 있다
ReactJS (5) Router 라우터를 사용하고 싶으면 react-router-dom을 사용하면 된다 npm i react-router-dom@5.3.0 필자는 5.3.0 버전을 사용하기 때문에 뒤에 @5.3.0을 붙여줬다 최신버전을 사용하고 싶으면 @5.3.0을 빼고 적어주면 된다 이렇게 두 개의 파일을 만들고 각각의 url을 지정해 줄 거다 참고로 버전 5와 6은 문법이 다르기 때문제 주의 해야된다 (필자는 버젼 5 쓰는 중) = parent component = Component을 각각 따로 실행한다 = path props에서 url을 설정해 준다 이후 App.tsx에서 Router component를 불러준다 예) 참고로 /:info는 :를 붙였을 때 info라는 변수를 넣어준다는 뜻이고 예를 들면 /news로 이동했을 때 n..
ReactJS (0) ReactJS 프로젝트 시작하기 npx create-react-app 프로젝트 이름 React project를 만들 때 터미널에 적어준다 npx create-react-app 프로젝트 이름 --template typescript Typescript을 쓰고싶으면 이렇게 적어주면 된다 이렇게 하게 되면 프로젝트 파일을 저장시키는 걸 볼 수 있다 참고로 데스크톱에 프로젝트 파일을 저장시키고 싶으면 터미널에서 cd desktop으로 경로를 바꿔준 다음 react 프로젝트를 만들면 된다
ReactJS (4) Theme Provider Theme provider이란 전체 테마를 지원한다는 뜻이다 예) 우선 이렇게 object를 만들고 const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke", }; 예) ThemeProvider component로 App을 감싸준다 const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 이렇게 하게 되면 App 안에 어디서나 theme prop으로 준 object를 가져다 쓸 수 있는데 쓰는 방법은 다음과 같다 예) ..
ReactJS (3) Global Style React를 쓰다 보면 global style을 적용시켜야 될 때가 있는데 그때 styled-components에서 createGlobalStyle을 쓰면 된다 예) CSS Reset const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, l..
ReactJS (2) Styled Component Styled component는 React에서 CSS 작업을 간편하게 할 수 있는 방법이다 npm i styled-components import React from "react"; import styled from "styled-components"; const H3 = styled.h3` font-size: 10px; `; function App() { return hi; } export default App; 이런 식으로 component 위에서 CSS 작업을 매우 간편하게 할 수 있다 기억해야 될 점은 tag가 대문자여야된다는 것

티스토리툴바