[React.js] JSX

리액트는 위와 같이 기능들을 컴포넌트로 분할해서 재사용할 수 있다.

 

컴포넌트 만들기

src 폴더에 위 사진과 같이 MyHeader.js파일을 만든다.

그 다음 위와 같이 입력합니다. 주의할 점은 컴포넌트에서 꼭 리턴하는 값이 있어야 한다는 것입니다.

 

그 다음 App.js에 들어가서 위와 같이 import 한 후 코드에 MyHeader 컴포넌트를 추가합니다.

그럼 위와 같이 컴포넌트가 화면에 표시되는 것을 볼 수 있습니다.

 

jsx문법

 

닫힘규칙

태그가 열리면 무조건 닫는 태그가 있어야한다. 태그가 하나이면 <image/>와 같이 바로 닫는 방법도 있다.

 

최상위태그

컴포넌트를 만드려면 반드시 최상위태그가 있어야한다.

 

여기서 최상위태그는 div이다.

최상위태그를 두고싶지 않다면 

이렇게 리액트를 import하고 React.Fragment를 이용해서 최상위태그를 만들어주면 된다. 

또한 <> </>와 같이 빈 태그를 만들어도 괜찮다.

 

css로 스타일링하기

 

App.js의 2번째 줄을 보면 App.css의 css를 적용하는 것을 볼 수 있다.

위 코드를 보면 header, h2, 그리고 아이디가 bold_test인 태그가 있다.

 

App.css을 위와 같이 바꿔주면,

이와 같이 잘 적용된 것을 볼 수 있다.

 

또한 css를 사용하지 않고도, 위와 같이 style을 이용하는 방법도 있다.

 

변수 사용하기

 

jsx는 자바스크립트 문법도 이용하므로{} 안에 변수를 넣어 출력할 수 있다. 앞서 계속 사용해왔던 것처럼 const안에 문자를 넣어 사용해도 되고, 

이렇게 함수를 넣어 리턴값을 호출하는 방식을 사용해도 된다.

 

또한 이렇게 삼항연산자를 이용해서 출력하도록 하는 방법도 있다.