[React] Props

Properties(속성)

: JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에서도 속성을 지정할 수 있음. 리액트에서 컴포넌트에 지정한 속성을  props라고 함. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫번째 파라미터로 전달됨. components에 가면 props에서 볼 수 있음 

컴포넌트 함수는 파라미터로 props 객체를 받는다. 

그래서 HandIcon 함수의 파라미터로 지금 value를 받고 있음. 

App.js 에서 value값으로 지정해주는 애들에 따라서 이미지가 바뀌게 됨. 

결과: 

 

Children 

: JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 children 값에 담기게 된다. 화면에 보여질 모습을 좀 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수 있음. 

 

※단순히 텍스트 작성하는 걸 넘어서서 컴포넌트 안에 컴포넌트를 작성할 수도 있고, 컴포넌트 안에 복잡한 태그들을 더 작성할 수도 있음.