1. 모든 페이지에 존재하는 공통 컴포넌트 적용하는 방법

대표적으로 페이지의 Nav 나 Footer의 경우 모든 페이지에 존재하는 경우가 많다.

위와 같은 레이아웃과 기능은 보통 공통 컴포넌트로 개발하는데, 모든 페이지에 존재하는 경우 쉽게 적용할 수 있는 방법을 알게 되었다.

• 내가 아끼는 2번째 React 프로젝트의 Routes.js 에서 발췌(?)
  

• 각 컴포넌트를 url로 연결 할 수 있도록 <Router> 태그로 감싸져 있는 것을 볼 수 있다.
• Routes.js는 보통 컴포넌트들을 URL로 연결하기 위해 사용하는 파일인데
  싱글 페이지 어플리케이션으로 개발하는 방법이다.
• Nav 컴포넌트가 들어가 있는것을 확인 할 수 있는데, Routes.js 또한 컴포넌트이기 때문에, 보통 react의 컴포넌트를 붙이듯이 붙일수 가 있다.

모든 파일에 공통 컴포넌트를 붙이지 않아도 되는 꿀팁!

2. config.js 파일 만들기

벡엔드(서버)와 연결하기 위해 fetch 함수를 많이 사용하는데, fetch함수의 첫번째 인자로 서버의 IP주소를 입력한다.

테스트중이거나, 다른 어떠한 상황에 IP주소가 변할 수 있는데 이럴때 마다 모든 파일을 돌아다니면서 IP주소를 변경하는 일은 너무 비효율적이다....

이럴때!!! config.js 파일을 생성하여 그안에 IP주소를 입력하고 이것을 가져오면, 파일의 내용 하나만 수정해도 모든 IP주소를 변경할 수 있다.

• config 라는 상수변수안에 객체로, api라는 key값과 value값을 넣어준다.
  
• export를 사용하여, 다른 파일에서 접근 가능 할 수 있도록 해준다.

• config.js 를 적용할 컴포넌트에서 import를 해준다.
  

• 위의 함수에서 config 객체의 api key값으로 접근하여, value 값을 가져오는 것을 확인 할 수 있다.

알면서도 잘 적용하지 못했던 것과, 새롭게 알게된 꿀팁들을 많이 알게 되었다.
다양한 꿀팁들을 알려주시고, 적용도 잘하셨던, 승하님께 감사인사 드립니다^^.