[React] 컴포넌트 만들기 (기초탄탄)

#생활코딩

리액트가 없다면, 이것을 리액트로 바꾼다면??

 

 

public이라는 디렉터리는 create-react-app 에서 npm run start를 했을 떄 파일을 찾는 다큐먼트 루트이다.

비교하기 위해서 public 디렉터리에 일단 리액트를 쓰지 않을 test.html 파일을 만들어본다.

 

semantic 태그

시맨틱 태그는 react와는 상관없는 html5의 스펙이다.

웹페이지는 대부분 헤더, 네비게이션, 본문 등의 영역이 있는데 이 부분을 의미론적으로 정의할 때 쓰는 것이 semantic 태그이다. 기능상의 변화는 없지만 태그를 보고 본문이구나 제목부분이구나~ 알수 있다.

1) 기본 웹 페이지 html                                                              2) semantic 태그 추가

 

 

만약 코드가 매~~우 길다고 했을 때 한 눈에 코드를 보기 어렵다. 

header 태그 4줄을 아래처럼 한 줄로 볼 수 있다면 엄청 편리해질 것이다.

이걸 가능하게 해주는 것이

리액트이다.

 

App.js 코드이다. 이것을 참고해서 똑같은 틀을 만들어 볼 것이다.

우리가 아는 일반적인 함수는 function이 붙지만, 자바스크립트의 최신 스펙이 들어가있는 class 안에 소속된 함수는 function을 생략한다. 

 

 

이전에 만들었던 html 파일에서 header 부분을 가져와서 붙여준다.

이 때 컴포넌트를 만들 때는 반드시 하나의 최상위 태그로 시작해야한다.

여기에서는 <header> 태그가 최상위 태그이다.

<header> 에 해당하는 태그를 <Subject>라는 이름의 태그로 정의했다.

Subject 태그를 추가해준다.

 

한 가지 더!

우리가 짜고 있는 App.js 의 코드는 유사 자바스크립트이다.

자바스크립트는 아니다!

따옴표가 있으면 |를 넣어줘야하는데 이런것들이 까다로워서 페이스북에서 만든 것이 컴퓨터 언어가 jsx이다.

우리가 jsx로 코드를 작성하면 create-react-app이 알아서 js코드로 컨버팅을 해주는 것이다.

 

 

실행을 해보면 다음과 같은 화면을 볼 수 있다.

elements를 보면 div 클래스가 app인 것에 header이 들어가있다.

리액트 코드에서는 Subject인 것을 리액트가 저 코드를 처리한 다음에 최종적으로 웹 브라우저가 알아들을 수 있는 header라는 이름의 태그로 바꾸어준 것이다.

 

웹 브라우저는 리액트라는 기술이 있는지 모른다??

- 리액트가 최종적으로 웹 브라우저에게 html 코드를 공급해주기 때문..

 

 

 

 

나머지 컴포넌트들도 만들어주고 App class에 추가해주었다.

 

 

 

 

요약)

리액트의 컴포넌트를 정리도구로 보아라!

우리는 정리정돈해서 이름을 붙이고 컴포넌트의 이름만 신경쓰면 된다. 

복잡도를 줄일 수 있는 방법을 터득했다!!