프론트 엔드 3주 3일차 레이아웃(Layout)

레이아웃

레이아웃은 프로젝트 전체의 UI 구조를 의미한다. 크게는 Header, Navigation, Footer, Main등으로 출력되는 화면을 나누는 것을 의미한다.

 

 레이아웃으로 화면을 나누었을 때의 장점은 어느 부분에서 생긴 이상인지 쉽게 확인할 수 있어 유지보수를 더욱 손쉽게 해줍니다.

 

Props.children

props를 주는 태그 안의 태그들을 담아놓은 객체로 따로 값을 넘겨주지 않아도 prop에 들어가 있게 된다. 이를 통해서 childeren 값을 레이아웃 바디 부분에 넣어주는 것이 가능하다.

예시 그림

특정 주소에서 레이아웃의 일부 숨기기

특정 주소를 담은 객체를 할당해두고 router와 includes를 통해서 주소를 확인하고 &&연산자를 통해서 화면에 선택적으로 출력하는 것이 가능합니다.

 

예시

위의 코드에서 LayoutHeader부분에서 쓰는 형식으로 쓰이게 된다.

 

글로벌 스타일

우리는 글로벌 스타일을 _app.tsx파일을 통해서 모든 컴포넌트에게 전달할 수 있습니다. CSS는 자식이 설정한 CSS 값이 부모가 설정한 CSS를 덮어쓰기 때문에 _app.tsx에 만들게 되면 이미 설정된 CSS 때문에 다른 컴포넌트를 변경해 줄 수 없는 일이 일어나지 않습니다. 

 

예시

 

위와 같이 _app.tsx를 통해서 글로벌 CSS를 적용해 줄 수 있다.

 

오늘의 알고리즘

오늘 사용한 메서드 join()은 배열의 객체를 () 안의 문자열을 사이에 두고 합쳐서 문자열로 리턴하는 메서드이다.

 

오늘의 코딩 결과