2. 리액트 컴포넌트 생성

◉ 리액트 컴포넌트를 만드는 방법 

 

▪︎ 리액트

 - UI를 위한 자바스크립트 라이브러리

 - 독립적이고 재사용 가능한 컴포넌트를 기반으로 작동함 

 - 데이터 흐름 : 상위 컴포넌트 → 하위 컴포넌트 

 - UI를 선택적으로 렌더링해서 효율을 높이기 위해 VDOM(Virtual Document Object Model)을 이용함 

 

▪︎ VDOM

 - 경량화된 DOM 

 - 실제 DOM을 처리할 때보다 훨씬 빠르게 조작 가능 

 

 

▪︎ 리액트 컴포넌트 - 두 가지 방식으로 정의 가능 

 ① 자바스크립트 함수 이용

function App(){
	return <h1>Hello World</h1>;
]

 

 ② ES6 클래스 이용 

class App extends React.Component {
	render(){
    	return <h1>Hello World</h1>;
    }
}

 - render() 메서드 필요 

  • 컴포넌트의 렌더링된 출력 결과를 표시하고, 업데이트시키는 역할 

 

 

---

🔸 인접한 JSX 오류

 

 - 컴포넌트의 return문을 수정하고 <p> 요소 추가 

 

- 앱 실행 시, 터미널 창에 Adjacent JSX elements must be wrapped in an enclosing tag 오류 발생 ( 인접한 JSX 오류 ) 

• 터미널 콘솔창에서 오류 확인 

 

  • 웹 브라우저에서 오류 확인 

→ 컴포넌트가 여러 요소를 반환할 때 : 상위 요소 안에 넣어야 함 

    즉, 반환할 여러 요소를 div와 같은 상위 요소 안에 넣으면 오류 해결됨 

 

 

∵ 컴포넌트의 경우, 화면에 배치할 태그를 하나만 가지고 있어야 함 

   : 만약 상위 요소로 감싸주지 않을 경우, 출력할 태그가 2개여서 오류 발생