728x90
반응형

map 2

컴포넌트 생성 후 map() 함수 사용

현재 만들고자 하는 UI는 다음과 같다. 멤버들 별 이름과 학력, 전공, email을 적고자 한다.위 UI를 보는 바와 같이 같은 UI가 반복되는 것을 볼 수 있다.하여 컴포넌트를 생성 후 map() 함수로 뿌려주고자 한다.   컴포넌트 생성 나는 일단 Function Component로 만들었다.그리고 컴포넌트 폴더를 따로 만들어두는 편이다.src 폴더에 components 폴더를 만들고 "MembersProfile.tsx" 파일을 생성하였다. 함수 형태로 컴포넌트를 만들기 위해서는 function 키워드를 사용해야 한다.그리고 아래 코드와 같이 const로 컴포넌트 이름을 선언해도 된다.나는 주로 아래와 같은 방식을 사용한다. 파일 생성 후 마지막에 export를 하면 다른 파일에서 해당 컴포넌트를 ..

Map

Map은 반복문이다. array 자료 앞에 map을 붙일 수 있다. 함수 안에서 card라는 파리미터는 array의 자료가 순서대로 받아지게 된다. 그러면 Card라는 서브컴포넌트가 card를 받고 순서대로 div 태그를 출력하게 된다. 위의 코드가 출력되면 이렇게 출력된다. 만약 이런 사이드바를 제작해야한다고 치자 이러한 객체를 받아왔을 때 이렇게 객체를 받아와서 map에 뿌리면 바로 제작 가능이다!! 마지막 연습으로 게시물 객체를 map으로 받아와서 하드코딩 없이 만들어보자 객체 : const backendInformation = [ { title: "HTML", content: "HTML은 어쩌고 저쩌고...", image: "#", }, { title: "CSS", content: "CSS는 어쩌..

728x90
반응형