1. Component Part 1
영어단어 'Component'는 한국말로 요소 내지는 부품을 의미한다. 레고로 만들어진 장난감에서 레고를 의미한다고 생각하면 된다. React의 관점에서 이해하자면, 'Component'는 화면을 구성하는 하나의 단위이며 이는 곧 '함수'를 말하는 것이다. 따라서 컴포넌트를 만든다는 것은 'html'을 'return'하는 '함수'를 만드는 것 그 자체라고 할 수 있다.
컴포넌트는 부품과 같은 존재이기 때문에 여기저기에서 사용할 수 있다. 컴포넌트를 '외부'에서 사용할 수 있게 하려면 'export' 해주면 되고, 'export'된 컴포넌트를 다시 '내부'에 가져와 사용하려면 'import' 해주면 된다.
그리고 'return'을 기준으로 윗부분에는 자바스크립트를 입력할 수 있는 영역, 아랫부분에는 html(정확히 말하면 React에서 html을 사용하기 위한 'JSX' 문법)을 입력할 수 있는 영역이 있다.
컴포넌트 코드의 구조는 위에서 언급한 바와 같이 'export', 'import', 'Javascript', 'JSX' 등의 요소로 이루어진다. 다음과 같다.
컴포넌트를 작성할 때에는 주의할 점이 있다. 컴포넌트를 만들 때, 첫 글자는 반드시 '대문자'로 해야 한다는 점이 바로 그것이다. 폴더의 첫 글자가 '소문자'인 것과 비교해야한다.
위의 내용과 같은 주의점은(즉, 대문자와 소문자 등과 같은 약속은) 서로의 코드를 직관적이고 더 빠르게 이해할 수 있게 한다는 점에서 그 효용이 있기에, 우리는 이를 가볍게 여겨서는 안 될 것이다.
2. Component Part 2
컴포넌트는 '부모&자식의 관계'로 설정할 수 있다. 컴포넌트는 다른 컴포넌트를 품을 수 있다는 것이 핵심이다.
마지막 줄의 'export'는 파일에서 '외부'로 내보낸다는 것을 의미한다. 즉, 'App 컴포넌트'가 화면 상에 현출되어야 한다.
하지만 여기서 'App 컴포넌트'는 'GrandFather 컴포넌트'를 자식 요소로서 품고 있고, 'GrandFather 컴포넌트'는 'Mother 컴포넌트'를, 'Mother 컴포넌트'는 'Child 컴포넌트'를 자식 요소로서 품고 있기 때문에, 최종적으로는 'Child 컴포넌트'의 내용인 '연결 성공'이 화면에 현출된다.
위와 같이 컴포넌트를 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있는데 이것을 '렌더링(Rendering)' 이라고 한다. 그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 JSX라고 한다.
3. JSX 문법
'JSX'는 컴포넌트의 생김새(화면에서의 레이아웃 구조, DOM객체 등의 위치 등)를 정의할 때 사용하는 '문법'이다. 'Babel'이라는 라이브러리가 자바스크립트르 변환해주기에, 얼핏보면 HTML 같지만, 엄연한 자바스크립트이다.
따라서 HTML에는 없는 JSX만의 독특한 문법적 특징 몇 가지를 살펴보았다.
3-(1). 태그는 꼭 닫아주기
input 태그를 닫지 않은 상태로 코드를 입력하면 다음과 같은 오류가 발생한다.
"Unterminated JSX contents."
태그를 닫지 않은 상태를, 끝나지 않은 JSX contents로 인식한다는 것이다. 태그를 닫아주면 원하는 상태에 바로 도달한다.
3-(2). 무조건 한 개의 엘리먼트를 반환하기
p태그와 div태그, 두 태그를 동시에 반환하려고 하니 곧바로 오류가 발생했다.
JSX에서는 무조건 한 개의 엘리먼트만 반환할 수 있기 때문이다.
한 개의 div태그로 묶어주면 정상적으로 작동함을 볼 수 있다.
3-(3). JSX에서 Javascript 값을 가져오는 방법
JSX에서 Javascript를 사용하려면 반드시 '중괄호'를 사용해야 한다. 그렇지 않으면 단순 문자열로 인식한다. '변수'로서 인식해야 하는데!
'cat_name'에 중괄호를 사용했기에 화면에는 'perl'이 렌더링된다. 중괄호가 없다면 'cat_name' 자체를 단순 문자열로 인식하고 'cat_name'이 렌더링된다.
3-(4). class 대신 className
말 그대로 html에서 사용하던 'class' 속성을, JSX에서는 'className'이라는 키워드로 작성해주어야 한다.
3-(5). 인라인으로 style 주기**
JSX에서는 한 줄로 style을 주고 싶다면, html에서와는 다르게 'Json형식'으로 style을 입력해주어야 한다. 혹은 변수를 선언해서 넣는 방식도 있다.
회고
"3-(1): 태그는 꼭 닫아주기"를 진행할 때, 태그를 닫았는데도 오류가 발생해서 당황했다. 'export' 부분을 입력하지 않아서 발생한 어이없는 실수였는데, 진짜 문제는 터미널의 '에러' 영역을 쳐다보지도 않았다. 에러에서 'export' 관련해서 실수가 있었음을 알려주고 있는데도 나의 주관으로 다른 문제점을 찾으려고 했던 것이다. 이따금씩 주변에서 나에 대한 걱정을 해줄 때, 나만의 지극히 주관적인 곤조를 부리지는 않았는지, 코드 한 줄을 통해 지난 순간들을 반추해봤다. 내일도 화이팅!
