728x90
반응형

컴포넌트 2

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

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

Component

Subcomponent mui 서브컴포넌트는 주로 mui 컴포넌트의 속성(props)으로 전달되며, 필요한 경우 커스터마이즈 하거나 조정할 수 있다. 쉽게 말해 반복되는 코드가 있을 때 짧게 줄여주는 역할을 한다. 이런 반복적인 div 태그들이 반복될 때 컴포넌트를 사용하게 되면 이렇게 사용할 수 있다. 오른쪽 코드는 Subcomponent 라는 이름을 가진 Subcomponent를 정의하고있고, 왼쪽에서 는 오른쪽에서 정의된 Subcomponent를 가져오는 역할을 한다. 이렇게 이름을 Card라고 변경하게 된다면 더욱 명시적은 코드를 작성할 수 있게 된다. div라고 적혀있으면 무슨 기능을 하는지 한눈에 보기 어렵지만, Card 라고 적어놓으면 바로 어떤 역할을 하는지 알 수 있게끔 작명할 수 있게된..

728x90
반응형