component문법

Component 문법

html ui를 하나의 function 처럼 만들어서 저장하는 형태

• 기본적으로 있는 App도 component 문법으로 만들어졌다
• 만드는법
  • 아래와 같이 function 식별자 이름의 첫 글자라를 대문자로 하며 위치는 다른 함수 밖에 위치한다
  • return으로 작성할 html문을 감싼다
  • 여러 개의 section을 만들지 않고 하나의 공간만을 구현
• 사용 경우
  • 반복적으로 사용할 경우
  • 큰 페이지들을 담을 경우
  • 자주 변경되는 ui들을 담는다
• 단점
  • 함수로 구분되어 있기 때문에 각 스코프에 위치해 있는 변수들을 같이 사용할 수 없다

//사용법
	<Abc></Abc>
	<Abc/>

   function Abc(){
     
    return (<div>
       abc
    </div>)
   }

//단점
	function App(){
      let a =4;
    	return(~~~~)
    }
	
	function Bpp(){
    	return(
          <div>{a}</div> // error
        )
    }