인프런 커뮤니티 질문&답변

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

page와 레이아웃.

안녕하세요

작성

·

220

0

안녕하세요 제로초님

혹시 header나 main section이나 따로따로

공통 컴포넌트들은 분리를 어떻게 해야 맞나요 ?

AppLayout처럼 HeaderLayout MainSectionLayout

이렇게 다 나눠야하나요 아니면

AppLayout에 모두 선언해야하나요 ?

nodejs redux express react Next.js

퀴즈

65%나 틀려요. 한번 도전해보세요!

넥스트제이쓰가 리액트 애플리케이션 개발에 제공하는 주요 이점은 무엇인가요?

데이터베이스 관리 기능 내장

서버사이드 렌더링 및 파일 기반 자동 라우팅 지원

별도의 Node.js 설치 불필요

UI 디자인 시스템 자동 생성

답변 1

0

제로초(조현영)

지식공유자

레이아웃의 구성요소로 쓰실거면 component에 만들어서 import하시고, 레이아웃처럼 쓰실거면 layout으로 만드세요.

레이아웃은 header, footer등 전부 포함한 틀입니다.

질문자

제로초님

import React from 'react';
import ProptTypes from "prop-types";
import Link from "next/link";
import style from "styled-components";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faInstagram } from '@fortawesome/free-brands-svg-icons';
//children : 레이아웃으로 감싸진 당한 태그들 모두
const HeaderLayout = () => {
return (
<div className="_header">
<HeaderInner>
<ul>
<li>
<Link href="/help">
<a>고객센터</a>
</Link>
</li>
<li>
<Link href="/notice">
<a>공지사항</a>
</Link>
</li>
<li>
<Link href="/consignment">
<a>위탁판매</a>
</Link>
</li>
</ul>

{/*로고*/}
<Logo>
<a href="/">
<img src="/images/logo.png" style={{ height: "40px" }} alt="로고" />
</a>
</Logo>

<ul>
<li>

<FontAwesomeIcon icon={faInstagram} />
<Link href="/search">
<a>
asd
</a>
</Link>


</li>
<li>
<Link href="/signup">
<a>
LOGIN
</a>
</Link>
</li>
<li>
<Link href="/myshop">
<a>
MYSHOP
</a>
</Link>
</li>
<li>
<Link href="/review">
<a>
REVIEW
</a>
</Link>
</li>
</ul>
</HeaderInner>
</div>
)
}

const HeaderInner = style.div`

 display : flex;
 justify-content: space-between;

 ul{
 display : flex;
 padding : 1rem 2rem;
 }
 li{
 padding : 0 1rem;
 }
 a{
 font-size : 16px;
 font-weight : 400;
 }
 a:visited{
 color : transparent;
 }
`;

const Logo = style.div`
 display : flex;
 padding : 1rem 2rem;
`;

export default HeaderLayout;
이런식으로 사용중인데
혹시 fontawsome 아이콘을 link 태그 안에 넣어서 아이콘 클릭시 해당 페이지로 이동할수는없을까요 ?
다른 방법이 마땅히 떠로르지않아 안에 넣어주면 아무것도 출력이 안되더라구요

제로초(조현영)

지식공유자

Link -> a -> FontAwesomeIcon 순으로 하면 안 되나요?

질문자

<ul>
<li>


<Link href="/search">
<a>
asd
</a>
<FontAwesomeIcon icon={faInstagram} />

</Link>


</li>
이런식으로 작성했는데
밑에 오류가 나오네요 ㅠㅠ

제로초(조현영)

지식공유자

a 안에 FontAwesomeIcon요

작성한 질문수