[React] Component 사용법
Component란 무엇인가?
- html을 한 단어로 줄여서 쓸 수 있는 문법이다
function App() {
return(
<Modal />
);
}
function Modal() {
return(
<div className="modal">
<div>제목</div>
<div>날짜</div>
<div>내용</div>
</div>
);
}
Component 사용법
- 대문자로 시작하는 이름을 가진 함수를 만든다
- 축약을 원하는 html 태그 전체를 넣는다
- 원하는 곳에서 <함수명 />
Component로 만드는 기준
component부분만 재랜더링 일어나게 할 수 있으니 효율적임
- 반복으로 사용되는 html 덩어리(ex.리스트)
- 자주 변경되는 html UI
- 하나의 페이지를 만들 때
Component 사용 시의 단점
- state 사용할 때 복잡해진다. (props를 사용해야한다)
React 참고사항
- return(괄호) 안에 작성할 것
- 동일선상의 태그를 여러 개 작성할 때는 하나의 또 다른 태그로 묶어줄 것
react 코드를 작성할 때는 return(<어쩌구>)라는 형식으로 return의 () 안에 html 태그를 작성한다. 이때 주의사항이 있는데 태그를 평행하게 연속으로 쓸 수 없다는 점이다. 예를 들어, div를 3개 쓰고 싶다면 html에서는 아래와 같이 쓸 것이다.
// 이것은 html
<div></div>
<div></div>
<div></div>
하지만 이는 react에서는 허용되지 않는다. 따라서 하나의 태그로 또 다시 묶어줘야 한다. 이때 아무런 의미가 없는 <></>
로 묶어주어도 된다.
// 이것은 react
return(
<div>
<div></div>
<div></div>
<div></div>
</div>
);
출처: https://www.youtube.com/watch?v=bq2SjODrhJQ&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=7
Author And Source
이 문제에 관하여([React] Component 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lifefm_j/React-Component-사용법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)