전체 글 (51) 썸네일형 리스트형 ES6 (0) ?? 바로 예시를 보도록 하자 const exceptData = data ?? []; 예시에서 data는 api에서 fetch해온 데이터이다 만약 data가 null일 경우 (api에서 갖고온 데이터가 존재하지 않는경우) exceptData = [] 반대로 data가 존재하는경우 exceptData = data 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.. ReactJS (10) useRouteMatch useRouteMatch는 특정 url에 들어와 있는지 확인해 주는 hook이다 예) useRouteMatch를 사용할 때에는 () 안에 확인하고 싶은 url을 넣어주면 된다 예시에서는 first 페이지에 있는지 확인을 위해 /first를 넣어주었다 이후 console을 확인해 보면 현재 Second 페이지에 있기 때문에 null이라고 나오는 걸 확인할 수 있다 그럼 First 페이지로 가보면 뭐가 나오는지 한번 보자 이렇게 url에 대한 간단한 정보가 나오는 걸 확인할 수 있다 여기서 끝내긴 아쉬우니까 useRouteMatch를 통해 간단한 작업을 한번 해보도록 하자 우선 페이지에 들어가 있을 때 그 페이지의 Link의 색깔을 바꿔주도록 해보자 예) 우선 첫 번째로 secondMatch를 만들어주고 B.. ReactJS (9) useEffect ReactJS는 state가 변경될 때마다 component 안에 있는 모든 코드가 재실행된다 하지만 API를 호출하거나 중요한 작업을 할 때에는 component가 불려 올 때 한 번만 실행되는 걸 원하는 경우도 생긴다 그때 바로 useEffect를 사용한다 useEffect는 component가 처음 렌더링 될때만 실행되게 한다 그럼 사용방법을 알아보자 예) Click me button을 누를때마다 setValue를 통해 value 값을 1씩 더해주었다 console에 보면 component을 렌더링해 모든 코드들이 한 번씩 실행되는 걸 볼 수 있다 하지만 useEffect를 사용하면 state가 변경되어도 재실행이 되지 않아야 되는데 button을 몇 번 클릭해 보고 console을 다시 확인해 보.. 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.. 이전 1 2 3 4 5 6 7 다음
