[React] Component 문법

많은 div들을 한 단어로 줄이고 싶을 때 Component  사용

 

* html 코드 짤 때 유의점:

return ( ) 안에 두개의 html 태그 병렬로 나란히 적는거 안됨.

return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 함.

// 굳이 <div> 두개를 나란히 적고 싶으면 하나의 div로 감싸거나
return (
	<div>
    	<div></div>
        <div></div>
    </div>
)

// 의미없는 div를 쓰기 싫은 경우, <></>로 감싸기(fragment 문법).
return (
	<>
    	<div></div>
        <div></div>
    </>
)

 

복잡한 html 을 한 단어로 치환할 수 있는 Component 문법

function App(){
	return(
    	<div>
        	<Modal></Modal>
        </div>
    )
}

function Modal(){ // 원하는 긴 html을 Modal 한 단어로 축약
	return(
    	<div>
        	<h4></h4>
            <p></p>
        </div>
    )
}

1. function 을 이용해서 함수를 만들고 작명(이름은 대문자로 시작해야 함).

2. 그 함수 안 return( ) 안에 축약을 원하는 html을 담기.

3. 원하는 곳에 <작명></작명> or <작명/> 을 넣으면 축약된 html 이 나타남.

 

Component 만들 때 주의점!

1. component 작명은 영어대문자로!

2. return () 안에 html 태그들은 병렬로 넣으면 안됨!

3. function App {}  도 컴포넌트 생성문법이기 때문에 function App{} 내부에서 만들면 안됨! 

 

arrow function 써도 됨.

function Name(){
	return (<div></div>)
}

let Name = () => { // let 대신 const 변수 써도 됨
	return (<div></div>)
}

 

어떤 html 들을 Component로 만드는게 좋은가?

- 사이트에 반복해서 출현하는 html 부분

- 내용이 매우 자주 변경될 것 같은 html 부분

- 다른 페이지를 만들고 싶을때 그 페이지의 html 내용

- 다른 팀원과 협업할 때 웹 페이지를 component 단위로 나워서 작업을 분배하기도 함.

 

Component 의 단점

자바스크립트에선 한 function 안에 있는 변수를 다른 function에서 마음대로 사용할 수 없기 때문에

모든 걸 component로 만들면 관리가 힘듦.

 

필요한 곳만 component 로 만들기!

 

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!