리엑트를 사용하여 홈페이지 리스트 구현 #1

리스트아이템 컴포넌트 구현

styled-components

각 요소는 Wrapper, ImageContainer, Container, TitleText, ContentText라는 이름으로 정의되어 있습니다.

LanguageListItem

props를 통해 post와 onClick을 받아옵니다. 이 컴포넌트는 Wrapper라는 div 요소를 렌더링하며, 이 div를 클릭할 때 onClick 함수를 호출합니다. Wrapper 내부에는 post의 imageUrl을 소스로 하는 ImageContainer와 post의 title과 content를 보여주는 Container가 있습니다.

LanguageListItem 컴포넌트는 외부에서 post와 onClick을 props로 받아와 이를 화면에 렌더링합니다.

 

리스트 컴포넌트 구현

LanguageList

이 컴포넌트는 props로 posts와 onClickItem을 받아옵니다. 

컴포넌트의 반환값은 Wrapper라는 div입니다. 이 div 내부에는 posts 배열을 map 함수를 사용하여 순회하면서 LanguageListItem 컴포넌트를 렌더링합니다. 각 LanguageListItem 컴포넌트는 post와 onClick 함수를 props로 받아오는데, post는 각 언어의 정보를 담고 있고, onClick 함수는 해당 언어를 클릭했을 때 호출됩니다.

 

받아온 컴포넌트 메인페이지에 구현

styled-components

Wrapper와 Container1020이라는 스타일링된 요소를 정의합니다. Wrapper는 페이지의 패딩, 너비, 그리고 요소들을 가운데 정렬하는 스타일을 지정하고, Container1020은 최대 너비가 1020px인 컨테이너를 나타냅니다.

MainPage

컴포넌트 내부에서는 react-router-dom 패키지에서 제공하는 useNavigate 훅을 사용하고 있습니다. 이 훅을 이용하여 페이지 간의 이동을 처리합니다.

Container1020 안에는 LanguageList 컴포넌트가 포함되어 있습니다. LanguageList 컴포넌트는 IntroData라는 데이터를 posts prop으로 받아와 언어 목록을 표시합니다.

언어 목록에서 각 항목을 클릭하면 onClickItem 함수가 호출됩니다. 이 함수는 navigate 함수를 사용하여 해당 언어의 id를 포함한 새로운 경로로 이동합니다. 이때, 언어의 id는 해당 언어의 세부 정보 페이지를 식별하는 데 사용됩니다.

 

JSON 형식

JSON

키-값 쌍의 집합으로 구성되며, 일반적으로 프로그래밍 언어에서 객체 또는 배열의 형태로 사용됩니다

키값 앞에 각 "id"는 고유식별자로 숫자형이다. 나머지는 문자열의 데이터 형식을 가지고 있다.