티스토리

영차영차
검색하기

블로그 홈

영차영차

duckduck123.tistory.com/m

나의 개발 블로그

구독자
0
방명록 방문하기

주요 글 목록

  • ReactJS (17) Memo ReactJS에서는 기본적으로 리렌더링 되는 조건들이 몇 가지 있다 대표적으로는 state가 바뀔때, parent component가 렌더링이 될 때인데 이러한 렌더링 되는 조건들 때문에 state가 바뀌지 않아도 렌더링이 되어 성능저하가 되는 걸 겪을 수 있다 따라서 이런 불필요한 렌더링을 막기 위해 memo가 있고 memo 사용방법을 봐보자 예) 이렇게 component을 export 할 때 React.memo(component 이름)을 써주면 해당 component는 불필요한 렌더링을 안 하겠다는 표시이다 공감수 0 댓글수 0 2023. 3. 10.
  • ReactJS (16) Drag and Drop (react-beautiful-dnd 사용하기) react-beautiful-dnd는 drag and drop 작업을 react 내에서 간편하게 해주는 library이다 npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd 우선 다운을 해주고 바로 예시를 보자 예) 코드가 좀 긴데 하나씩 설명해 보겠다 1. 우선 drag and drop 할 공간을 정해야 하는데 그 공간을 정하는 게 바로 component이다 이 component는 onDragEnd props가 필요한데 이건 유저가 element를 drag and drop 했을 때 받는 정보를 갖고 온다 2. 그다음 component는 뜻 그대로 element를 drop 할 수 있는 공간이다 이 component는 droppabl.. 공감수 0 댓글수 0 2023. 3. 10.
  • ReactJS (15) Ref ref는 component를 통해서 HTML element를 가져올 수 있다 예: video.play() , a.click() 이렇게 video , anchor HTML element를 갖고 와 작업을 하는 거라고 보면 된다 하지만 HTML element를 갖고 올 때마다 사용하는 건 아니고 DOM에 직접 접근해야 할 때만 ref를 사용한다 직접 접근해야 되는 경우는 state로 처리하기 힘들거나 다른 method 방법이 따로 없을 때 쓴다 예: 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기, 애니메이션, 3자 DOM library 활용 추가로 component에 이미 제공되고 있는 prop들을 활용해야 한다 예: Dialog component에서 isOpen p.. 공감수 0 댓글수 0 2023. 3. 10.
  • ReactJS (14) Recoil - Selector Recoil에서 selector은 atom을 갖고 와 작업하는데 쓰인다 그럼 바로 예시를 보자 예) 우선 Fruit atom을 만들어주고 default = 과일 이름들을 넣은 array이다 이후 selector은 key (고유식별자) 및 get을 통해 이미 만들어놓은 atom을 갖고 올 수 있다 예시와 같이 selector 안에서 fruits = get(Fruit)를 통해 Fruit atom을 갖고 왔다 여기서 get은 atom을 갖고 와 변형만 시켜준다 따라서 atom의 값은 변하지 않는다 이후 filter을 통해 Fruit atom을 변형시킨 걸 볼 수 있다 그다음에 useRecoilvalue()를 통해 selector을 불러왔다 이제 console을 확인해 보자 이렇게 배열이 나온 걸 볼 수 있다 .. 공감수 0 댓글수 0 2023. 3. 9.
  • ReactJS(13) useForm ReactJS에서 form 작업을 할 때 useForm hook을 사용하면 작업이 엄청 간편해진다 npm i react-hook-form 우선 다운을 하고 바로 예시를 보자 예) register(input 이름)은 input에 적용시켜서 다양한 event들을 받을 수 있고 (onChange, onBlur) 다른 작업들을 할 수 있다 예) useForm에서 handleSubmit은 input을 submit 했을 때 받을 수 있는 정보들을 보여준다 예시와 같이 onSubmit 함수를 만들어 handleSubmit을 form onSubmit props에 적용시킨 뒤 data를 console로 확인했더니 input 이름과 submit 한 정보를 볼 수 있다 이것뿐만 아니라 input에 더 많은 옵션들을 추가할 .. 공감수 0 댓글수 0 2023. 3. 8.
  • ReactJS (12) Recoil 예를 들어 Component1에 있는 정보를 Component6 한테 넘겨주고 싶다고 가정을 해보자 Component1과 component6 사이에는 component2 - component 5까지 연결이 되어있는데 정보를 넘겨주기 위해서는 prop을 이용해서 component1 -> component2 ->... -> component6 이런 식으로 한 component씩 prop을 사용해서 component6까지 넘겨줘야 한다 이렇게 하면 불필요한 props들을 넘겨줘야 하고 또 직접적으로 넘겨주지 못하기 때문에 귀찮아진다 이렇게 정보를 직접적으로 받고 쓰기 위해서 recoil을 쓴다 npm i recoil 다운을 하고 바로 예시를 보자 우선 recoil을 사용하기 전에 세팅을 해줘야 하는데 useQ.. 공감수 0 댓글수 0 2023. 3. 8.
  • ReactJS (11) useQuery useQuery는 fetching 할 때 매우 유용한 hook이다 npm i react-query React 버전이 18이면 react query를 못 불러오는 현상이 있어 npm i @tanstack/react-query 이 방식으로 react query를 다운로드 해야한다 이제 useQuery의 사용방법에 대해 알아보자 우선 시작하기 전에 useQuery 세팅을 해야 하는데 간단하다 QueryClient를 만들고 QueryClientProvider component (client props를 넣어줘야 된다)로 App component를 감싸면 된다 이렇게 해서 세팅을 마쳤다 다음으로 api에서 fetch를 해보자 이후 useQuery(고유식별자 다른 query와 고유식별자가 같으면 안 됨, fetch.. 공감수 0 댓글수 0 2023. 3. 5.
  • ReactJS (10) useRouteMatch useRouteMatch는 특정 url에 들어와 있는지 확인해 주는 hook이다 예) useRouteMatch를 사용할 때에는 () 안에 확인하고 싶은 url을 넣어주면 된다 예시에서는 first 페이지에 있는지 확인을 위해 /first를 넣어주었다 이후 console을 확인해 보면 현재 Second 페이지에 있기 때문에 null이라고 나오는 걸 확인할 수 있다 그럼 First 페이지로 가보면 뭐가 나오는지 한번 보자 이렇게 url에 대한 간단한 정보가 나오는 걸 확인할 수 있다 여기서 끝내긴 아쉬우니까 useRouteMatch를 통해 간단한 작업을 한번 해보도록 하자 우선 페이지에 들어가 있을 때 그 페이지의 Link의 색깔을 바꿔주도록 해보자 예) 우선 첫 번째로 secondMatch를 만들어주고 B.. 공감수 1 댓글수 0 2023. 3. 5.
  • ReactJS (9) useEffect ReactJS는 state가 변경될 때마다 component 안에 있는 모든 코드가 재실행된다 하지만 API를 호출하거나 중요한 작업을 할 때에는 component가 불려 올 때 한 번만 실행되는 걸 원하는 경우도 생긴다 그때 바로 useEffect를 사용한다 useEffect는 component가 처음 렌더링 될때만 실행되게 한다 그럼 사용방법을 알아보자 예) Click me button을 누를때마다 setValue를 통해 value 값을 1씩 더해주었다 console에 보면 component을 렌더링해 모든 코드들이 한 번씩 실행되는 걸 볼 수 있다 하지만 useEffect를 사용하면 state가 변경되어도 재실행이 되지 않아야 되는데 button을 몇 번 클릭해 보고 console을 다시 확인해 보.. 공감수 0 댓글수 0 2023. 3. 5.
  • ReactJS (8) Link ReactJS에서는 anchor을 쓰지 않고 Link를 쓰는 걸 추천한다 그 이유는 anchor은 client-side-navigation이 없기 때문인데 이걸 간단하게 설명하면 페이지를 이동할 때 새로고침이 된다는 뜻이다 새로고침을 하게 되면 속도를 느리게 만들기 때문에 좋지 않고 Link는 새로고침이 되지 않아서 페이지 이동이 빠르기 때문에 routing을 할 때 Link를 쓰는 게 좋다 그럼 Link를 쓰는 방법에 대해 알아보자 예) 이런식으로 to props를 이용해서 url을 지정해 준다 여기서 조금 더 심화로 들어가면 Link로 페이지를 이동할 때 정보를 같이 넘겨줄 수 있다 예시 코드를 보기 전에 ReactJS (7) Map 편을 이어서 코드를 짜기 때문에 우선 7편을 간략하게라도 보고 오는.. 공감수 0 댓글수 0 2023. 3. 4.
  • 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을 통해 코인 이름들을 넣어준다 코.. 공감수 0 댓글수 0 2023. 3. 4.
  • ReactJS (6) useParams ReactJS (5)에서 route를 만들 때 info 변수를 만들었다 이렇게 url에서 어떠한 정보를 빼내올때 useParams를 쓰면 된다 예) 이렇게 useParams를 써준후 url은 /wef로 해주고 info 페이지로 이동후 console을 열어주면 이렇게 wef가 info 변수에 찍히는 걸 볼 수 있다 그럼 이 object안에 있는 info를 어떻게 가져올까? 이런 식으로 {변수이름}을 해주면 바로 정보를 빼내올 수 있다 필자는 typescript을 쓰기 때문에 따로 interface도 지정해 준 걸 볼 수 있다 공감수 0 댓글수 0 2023. 3. 4.
  • 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.. 공감수 0 댓글수 0 2023. 3. 4.
  • ReactJS (0) ReactJS 프로젝트 시작하기 npx create-react-app 프로젝트 이름 React project를 만들 때 터미널에 적어준다 npx create-react-app 프로젝트 이름 --template typescript Typescript을 쓰고싶으면 이렇게 적어주면 된다 이렇게 하게 되면 프로젝트 파일을 저장시키는 걸 볼 수 있다 참고로 데스크톱에 프로젝트 파일을 저장시키고 싶으면 터미널에서 cd desktop으로 경로를 바꿔준 다음 react 프로젝트를 만들면 된다 공감수 0 댓글수 0 2023. 3. 4.
  • 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를 가져다 쓸 수 있는데 쓰는 방법은 다음과 같다 예) .. 공감수 0 댓글수 0 2023. 3. 4.
  • 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.. 공감수 0 댓글수 0 2023. 3. 4.
  • 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가 대문자여야된다는 것 공감수 0 댓글수 0 2023. 3. 4.
  • ReactJS (1) JSX 간단하게 말하면 JSX는 HTML 코드를 자바스크립트 안에서 사용하는 걸 뜻한다. JSX를 쓰면 더이상 createElement를 안 써도 돼서 간편하다 리엑트에서도 JSX를 쓸수있어 코드를 더욱 쉽게 짤 수 있다 예) 리엑트 요소 만들기 const h3 = React.createElement( "h4", { id: "title", onMouseEnter: () => console.log("hi"), }, "Hello" ) 예) JSX const H4 = console.log("hi")}>hello 이런 식으로 JSX를 쓰면 HTML 코드와 거의 동일한 걸 볼 수 있다. 주의해야 될 점은 component 이름이 꼭 대문자로 시작해야 된다는 것. 이유는 component를 부를 때 대문자가 아니면 tag.. 공감수 0 댓글수 0 2023. 3. 4.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.