React js의 UI 블록만들기, 데이터 속성 처리하는 법
목표 : Component의 속성처리 JSX 파이렝 논리 추가 Map 사용하여 항목 목록을 처리 1) 컴포넌트: 재사용 가능한 자체 포함 단위인 React 애플리케이션의 핵심 구성 요소, 컴포넌트에는 자체 속성(또는 props)이 존재하며, 속성을 이용해 데이터를 컴포넌트로 전달하여 다양한 시나리오에서 재사용할 수 있습니다. 또한 문자열과 기본 형식 외에 더 복잡한 데이터를 사용할 수 있으므로, 효율을 높일 수 있습니다. Props 란? 재사용 가능 단위로 제작된 react 컴포넌트를 허용하기 위해 데이터를 속성(props)를 통해 컴포넌트로 전송 props는 구성 요소의 단일 인스턴스에 사용할 수 있는 읽기 전용 값입니다. 프로그래밍 방식으로 설정하거나 HTML 요소의 특성을 설정할 때 사용하는 것과 동일한 구문을 사용하여 설정할 수 있습니다 ex) function Your Title ( props ) { return ( < section > < h2 > { props.title } </ h2 > </ section > ) }; YourTitle 은 props 라는 매개변수를 허용, 컴포넌트를 사용할 떄 전달된 특성, 속성을 자동으로 포함 2) JSX 파일의 논리 처리 : HTML과 JS의 조합, if..else문,case, 부울문 사용 가능 ex) 3.5점 이하면 red, 이상이면 green으로 표현하는 code 3)Map 사용하여 배열에 데이터 표시 배열 데이터 처리는 다른 개체 처리와 비슷하지만, 데이터를 반복하여 살펴보고 사용자에게 표시하는 기능이 필요합니다. JSX에서 JavaScript 코드, map함수를 사용하여 수행합니다. map을 이용하면 배열의 수정 복사본을 만들 수 있습니다. map함수를 이용하면 배열...
