React3

• 

  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.