React-components 생성

리액트 컴포넌트 생성

컴포넌트는 함수를 이용해서 생성

• function
• () => {} (화살표함수)

function Item(props){
 return(
  <li>
   <img src={props.img} />
  </li>
 );
}

const Item = () => {
	return(
		<li>
			<img src="">  		
		</li>
	);
}

함수로 Item컴포넌트 생성후 태그처럼 사용

이미지를 받아오려면 태그안에 받아오는 props.img를 써준다

const ItemMain = (
	<ul>
  		<Item img="이미지" />
	</ul>
);

• 리액트 컴포넌트
  index.html 에 작성한 코드들을
  npx creat-react-app 리액트파일이름 을 만들어서 그 안에 src를 열어
  컴포넌트로 나누어 정리한다

1. 정리할 코드를 복사한다

2. src 안에 components폴더를 만든다

3. 폴더안에 만들고 싶은 컴포넌트이름을 파일로 만든다
   ex) Title.js 생성

4. 복사한 코드를 생성한 파일안에 넣고 맨 아래쪽에
   export default Title;
   를 적어넣는다.

5. App.js 에 index.html 의 소스를 전부 옮겨넣고
   맨위에 import Title from './components/Title'
   을 넣어 Title.js를 받아 올 수 있게 해준다.

6. 맨 아래쪽에 ReactDOM.render(받아올파일, 파일을 받아올곳);