ReactJS/JSX & Props (4) 썸네일형 리스트형 Prop-types prop-types는 내가 전달받은 props가 내가 원하는 props인지 확인해주는 것.(실수 방지) npm i prop-types Map object list에서 정보를 가져오는데, 반복적인 일에는 Map 함수를 이용해 Dynamic Component Generation. map 함수는 원하는 함수를 리스트의 모든 요소에 적용한다. 이때 react는 멍청하기 때문에 각각에 id를 붙이고, property에도 key:id 를 넣어주면 좋다. Props 컴포넌트를 호출할 때 property들을 넣어줄 수 있는데, 이건 그 함수의 인자로 쓰인다. 아래와 같이 사용할 컴포넌트의 이름을 적고, 뒤에 property들을 차례로 적는다. 컴포넌트 함수에서는 인자들을 하나씩 적을 필요 없이 props만 적어도 괜찮다. 이때 인자로 {number}이라고만 써도 함수가 이를 이해한다. Component Component는 HTML을 반환하는 함수 함수를 컴포넌트로 사용하기 위해서는 이렇게 표현한다. : 컴포넌트를 사용해서 HTML처럼 작성할 때 react가 사용된다. javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다. jsx는 javascript 안의 HTML이라고 생각하면 된다. jsx는 react에 특화된 거의 유일한 개념이다. 그 외에 react에서 쓰이는 개념들은 모두 javascript와 일맥상통 유의해야 할 점은, react application은 한 번에 하나의 컴포넌트만 렌더링 할 수 있다는 점 App 컴포넌트 안에 다른 컴포넌트를 넣어서 사용. 이전 1 다음
