<Reactjs> JSX에 대하여

우선 간단하게 JSX에 대하여 짚어보자면

'JSX는 리액트에서 컴포넌트를 정의할 때 사용되는 문법이다.'

 

위 사진에서 return 뒤에 있는 <div>Hello</div>는 딱 봤을 때 HTML코드 처럼 보인다. 하지만 이렇게 언급을 하는 이유가 있듯이 위의 저 코드는 스크립트 코드이다. 한번 Babel로 넘어가서 확인을 해보자. 추후에 Babel이 무엇인지도 간단하게 다루어 보겠다.

 

 

 

위의 사진을 보면 그저  Hello 와 span 태그로 문구하나를 써준것이 오른쪽의 스크립트코드로 변환 된 것을 볼 수 있을 것이다.

하지만 이렇게 스크립트 코드로 변환시켜 주려면 지켜야 하는 규칙들이 몇가지 있다.

 

첫번쨰!!!!!

     태그는 무조건 꼭 닫혀 있어야 한다>< 

 

이런식으로 닫는 div태그가 하나 없을 경우에 에러가 발생하는데 input 이나 br 같은 태그들 같은경우 <br></br>로 써주기엔 너무 불편하니 <br />, <input /> 등 싱글태그로도 사용이 가능하다.

 

 

두번쨰!

두개의상의 태그는 꼭 하나의 태그로 감싸져 있어야 한다.

이 말을 내식대로 바꿔보자면 형제들끼리 있으면 안되고 부모가 있어야 한다 혹은 동급의 태그들만 있으면 안되고 캡짱태그가 있어야 한다로 풀어 볼 수 있다.

 

 

이 코드를 보면 감싸주는 태그 없이 각각 두개의 태그가 서로 속해있지 않고 까불고 있는것을 볼 수가 있다. 괄호에 표시된것처럼 에러가 발생하는데

 

 

이렇게 div태그로 부모 혹은 캡짱 태그로 감싸주게 되면 에러가 사라지게 된다.

 

 

 

***** 여기서 키포인트!!!!!********

저렇게 div태그로 감싸주는 것이 불편하거나 혹은 본인이 짜둔 스타일링에 영향을 끼칠떄(div 선택자를 이용했거나 부모 블록에 flex를 맥여놨다거나) 등을 위해 하나의 표기법이 또 존재하는데 

이런식으로 써주면 된다. 실제로 브라우저에서 개발자도구를 이용해서 소스보기로 코드를 검사해봐도 추가된 div태그등이 없을 것이다!!!. 

 

 

이번에는 JSX내부에서 '자바스크립트 값을 사용하는 방법' 에 대해서 알아 볼것이다.

 

컴포넌트를 이렇게 작성해주고 실행화면을 보게 된다면

요런식으로 중괄호로 감싸줘야지 값을 사용할 수 있는걸 확인할 수 있당><

 

 

또 인라인스타일을 주고 싶을 떄가 있는데 보통 우리는

<div style="background:black;"></div>이런식으로 간단한 스타일링등은 직접 태그에다 먹여줬는데 이런 식으로 코드를 작성해주면 에러가 난다. 인라인스타일을 먹일려면 따로 객체를 만들어 줘서 넣어주면된다.

 

 

이런식으로 스타일이 정상적으로 먹는 걸 볼 수가 있겠다><

 

그다음 한가지 더  추가사항으로 

CSS를 입히거나 스크립트 처리를위해 클래스를 붙여줄때 기존의 class 말고 className을 사용하도록 한다. 실제로 작성해보면 과거에는 아예 에러가 떴으나 지금은 작동은 되도 콘솔창에 className을 써주라고 경고 메세지가 뜬다.