컴포넌트 사용해보기

10번줄(위), 9번줄(아래) 설명의 경우

{ 변수 }를 위한 설명이니 헷갈리지 말자

실행시켜보면

다음과 같이 HTML태그를 이용한 것과,

변수값을 저장해 이용한 값들이

제대로 출력되는 것을 확인할 수 있다. 

 

 

써보면서 느낀 점은

변수형 컴포넌트와

클래스형 컴포넌트의 큰 구조는 같지만

자잘자잘한 문법들이 달라 헷갈린다는 것이었다.

 

위의 코드를 써보며 느낀 다른 구조는 다음과 같다.

1. 클래스형 컴포넌트는 리턴해주기 위해 render( )라는 함수를 써야한다.

(당연한 이야기지만 함수형 컴포넌트에 render( )함수를 쓰니 에러가 났다.)

2. 변수 출력 위해 앞에 this. 키워드를 붙여줘야 한다.

 

이 외의 문법 구조는 같았으니 우선은 이 점들만 신경쓰면 될 것 같다.