온라인 강의/ReactJS로 영화 웹 서비스 만들기 [Nomad]

#2.6 JSX part Two

유호야 2023. 5. 18. 23:55
반응형

기존에 정의한 Title 변수를 함수 형태로 만들어준다
화살표 함수로 정의한 후에 Container 내부에 그 요소를 넣고 싶다면 
태그 형식으로 아래와 같이 정의할 수 있다. 

 const Container = <div><Title /> <Button /></div>

 

그래서 우리가 직접 만든 요소들은 대문자로 시작하게 작성해야 한다.

이렇게 JSX를 이용해서 개별 요소들을 만들어서 하나의 요소 내부에 넣는 역할을 할 수 있다.

 

아래와 같은 요소를 보면 Container 를 함수 형태로 만든다음 render 함수 내에서도 태그 형식으로 넣을 수 있다.

 const Container = () => <div><Title /> <Button /></div>
  ReactDOM.render(<Container />, root);
  
   const container = <div><Title /> <Button /></div>
  ReactDOM.render(container, root);

 

반응형