React6

• 헷갈리는 styled component 기능 1. 하위 컴포넌트 하위 컴포넌트에게 지정하고 싶은 스타일은 다음과 같이 { } 스코프를 사용하면 된다. a { color: black; font-size: 20px; text-decoration: none; margin: 0 10px; } 2. &: 연산자 : 재참조 &를 사용하여 해당 컴포넌트를 재참조할 수 있다. &:hover { background: #339af0; } &:active { background: #1c7ed6; } 3. &. 연산자 : classname &.classname 으로 조건부를 실행할 수 있다. 예로 다음과 같이 현재 페이지에만 on 이라는 classname 을 부여할 때, if (i === pagination.current) { el.className = "on"; } .. React 2022. 5. 14.

• Axios Delete 에서 Body 에 data 넣는법 Axios 의 delete 를 사용할 때는 보통 다음과 같이 data 를 전달하지 않는다. axios.delete(url[, config]) 그러나 사용해야 하는 경우,, 나처럼 헤매는 사람이 없기를... Axios.delete("/comments" + "/" + postId, { data: { // 서버에서 req.body.{} 로 확인할 수 있다. commentId: 1, userId: 0, }, headers: { // 생략 }, }) 다음과 같이 data : {} 형태로 추가하면 된다..! 그러면 이는 서버에서 body 로 확인할 수 있기 때문이다! axios method 형태 axios.request(config) axios.get(url[, config]) axios.delete(url[, c.. React 2022. 5. 12.

• React 에서 새로고침 시 탭이 첫 번째 항목으로 이동하는 문제 해결 const currentTab = () => { let path = window.location.pathname; console.log("경로", path); if (path === "/mypage") return 1; else if (path === "/mypage/my_comment") return 2; else if (path === "/mypage/my_interested_animal") return 3; else if (path === "/mypage/my_interested_board") return 4; else if (path === "/mypage/edit_info") return 5; }; const [menu, setMenu] = useState(currentTab); React에서 .. React 2022. 4. 10.

• 

  React 에서 중첩 라우터 사용하기 App.js 에서 탭바를 만들고, 해당 탭들을 라우터로 연결하였다. /* 생략 */ 위와 같은 메인 화면에서 탭을 누르면 각 라우터로 링크 이동하게 된다. 그런데, 마이 페이지 내에서 또 탭을 구현하여 중첩으로 라우터를 사용하려 하였더니, 앱 내에서 라우터는 한 번만 사용할 수 있다며 오류가 발생하였다. 나는 위 사진 처럼 마이페이지 라우터 내에서 좌측의 탭을 구현하기 위해 중첩된 라우터를 사용하고 싶었다. 그러기 위해서는 위 코드에서 /mypage/* 을 작성했듯이, 와일드 카드를 사용해야 한다. 와일드카드 마이 페이지 내부에서 중첩된 라우터들은 다음과 같이 작성하였다. function MyPage() { return ( ); } 아까 와일드 카드를 사용했기 때문에, mypage/* 의 * 자리에 my.. React 2022. 4. 8.

• 

  자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기 / useState, useEffect 로 관리하기 다음과 같이 헤더 컴포넌트 / 탭 컴포넌트 / 페이지 컴포넌트로 구성된 페이지를 구성 중이였다. App.js 에서 작성한 컴포넌트의 구조는 다음과 같다. // 라우터 생략 4개의 탭을 클릭했을 때 각 탭이 active 되는 것은 탭 컴포넌트에서 잘 구현하였는데, 헤더에서 타이틀과 로그인을 클릭했을 때, 타이틀의 경우 첫 번째 탭이 활성화되도록, 로그인의 경우 모든 탭이 비활성화되도록 구현하고 싶었다. 그러기 위해서 App.js 에서 탭을 관리할 수 있는 변수를 따로 만들고 App.js 로 전달 -> 탭 컴포넌트로 전달 > 의 로직을 짜야할 것 같았다. 아직 리액트 hook 에 대한 개념이 부족한지라, 우여곡절이 정말 많았다.😂🤣 먼저, 부모 컴포넌트인 App.js 에서 tab 메뉴가 변경되었을 때 리렌더.. React 2022. 3. 31.

• useEffect, useMemo, useState, useCallback, React.Memo() 개념 및 차이점 useState const [inputs, setInputs] = useState({ username: '', email: '' }); 첫 번째 배열인자인 inputs 는 실제로 데이터를 저장하는 변수이다. 그리고 두 번째 배열 인자는 변수를 변경하기 위한 함수이다. inputs 값을 변경하기 위해선 setInputs 를 이용해야만 한다. useState 괄호 안에 들어가는 값은 inputs 의 초기값이다. setInputs({ ...inputs, [name]: value }); inputs 값을 변경하기 위해서는 다음과 같이 setInputs 함수만을 이용해야 한다. 위 코드에서는 inputs 의 배열 원소들을 그대로 가져온 후, name(username 혹은 email) 에 해당하는 값을 value .. React 2022. 3. 18.