<Reactjs> 첫번째 컴포넌트 만들기

프로젝트를 성공적으로 생성하였으면 "컴포넌트"를 한번 만들어볼 것인데 본인도 지금 강의와 학원에서의 수업을 들으면서 나만의 개념으로 간단히 정의했을 때 "UI조각" 이라고 큰 틀의 개념으로 잡고 사용하고 있다.. 물론 이 컴포넌트가  class 와 fuction 두가지 방식으로 정의 할수 있고  props와 state를 가지고 있으며 그 둘은 변하지 않는 값과 어떤 걸 임포트 해주고 등의 자세한 개념도 탑재되어 있지만 크게 생각할 떄는 조각!! 이라고 보면 될 것 같다.

 

그럼 한번 같이 첫 컴포넌트를 생성하고 적용시켜보자 

 

우선 위와 같이 Hello.js 라는 이름의 파일을 하나 만들어 준다. 

 

 

그 안에서 리액트를 불러와서 쓸것이기 떄문에 import React 코드를 작성한뒤에 컴포넌트는 위에서도 잠시 언급했듯이 기능에 따라서 function 과 class. 두가지 방법으로 정의해 줄 수있는데 나중에 자세히 다루고 일단 function으로 정의를 했다. Hello에 관한 컴포넌트를 정의했으면 export를 통해 다른 파일에서 가져다 쓸 수 있게 해주는 작업을 해준다.

 

 

그리고 상대경로를 통해 Hello 를 불러와준뒤에  <Hello /> 형식으로 가져다 써주면 되겠다.

 

 

여러번 호출해서 사용도 가능하다 

성공하였지만 나는 생각이 든게 Hello를 가져다 쓴 App 파일도 Hello와 같이 function으로 감싸져 있고 밑에서 export를 해주고 있기에 어디에서 또 가져다 쓰지 않을까 하는 것이었다. 프로젝트 생성시에 깔린 index.js파일로 들어가보면아래의 사진과 같이 나와있는데

 

 

결국은 id이름이 root 인것에  Hello<App 즉 헬로를 이미 임포트 하고 있는 App을  render 해준다는 것이다.  public 폴더에 index.html  을 들어가보면

이런식으로 root가 존재하는데 여기에 최종적으로 UI조각으로 들어간다고 보면 되겠다.

그럼 첫 컴포넌트 만들기 성공!!><