2. 리액트로 포트폴리오 사이트 만들기 (헤더 영역)

13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역

Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리

webstoryboy.co.kr

(관련 사이트)

이번에는 "헤더" 영역을 세팅했다.

GitHub - kss2002/PortfolioWebsite-beta

Contribute to kss2002/PortfolioWebsite-beta development by creating an account on GitHub.

github.com

코드는 여기를 참고하면 된다.

핵심 포인트

코드가 길기에 핵심 포인트만 말하면 다음과 같을 것이다.

1. 반복되는 부분은 데이터화하면 좋다.

2. 따로 만든 배열을 map 함수를 통해서 관리하자.

3. 리액트에서 class는 className이다. 이 부분을 조심하자.

4. 리액트는 전체 로딩이 아니라 부분적으로 로딩해 준다. 고로 따로 변수를 줘야 할 수 있는데, 이때 상태를 관리해야 한다.

5. 가장 무난하게 쓰는게 useState이다.

5. 리액트 Hooks

Hooks리액트가 처음 만들어질 때부터 있던 개념은 아니지만, 새로 생긴 중요 개념이라고 생각하자.앞서서 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트로 나뉜다고 하였다. (사진 참고)이 상

codingworld2002.tistory.com

4. 리액트 State and Lifecycle

state는 중요하다.-코딩 애플-코딩에서 "이거 왜 쓰는 거예요? 이 개념은 무엇인가요?"에 대한 질문이 중요하다. 단순 코드 따라치기로는 코드를 해석할 수 없기 때문이다. state도 마찬가지이다. 이

codingworld2002.tistory.com

+(아, 당연히 반응형으로 설계가 되었다. 어느 정도 웹이 줄어들면 헤더가 사라지고, 햄버거 표시가 나오게 된다.

관련글