[React.js] JSX
리액트는 위와 같이 기능들을 컴포넌트로 분할해서 재사용할 수 있다.
컴포넌트 만들기
src 폴더에 위 사진과 같이 MyHeader.js파일을 만든다.
그 다음 위와 같이 입력합니다. 주의할 점은 컴포넌트에서 꼭 리턴하는 값이 있어야 한다는 것입니다.
그 다음 App.js에 들어가서 위와 같이 import 한 후 코드에 MyHeader 컴포넌트를 추가합니다.
그럼 위와 같이 컴포넌트가 화면에 표시되는 것을 볼 수 있습니다.
jsx문법
닫힘규칙
태그가 열리면 무조건 닫는 태그가 있어야한다. 태그가 하나이면 <image/>와 같이 바로 닫는 방법도 있다.
최상위태그
컴포넌트를 만드려면 반드시 최상위태그가 있어야한다.
최상위태그를 두고싶지 않다면
이렇게 리액트를 import하고 React.Fragment를 이용해서 최상위태그를 만들어주면 된다.
또한 <> </>와 같이 빈 태그를 만들어도 괜찮다.
css로 스타일링하기
App.js의 2번째 줄을 보면 App.css의 css를 적용하는 것을 볼 수 있다.
위 코드를 보면 header, h2, 그리고 아이디가 bold_test인 태그가 있다.
App.css을 위와 같이 바꿔주면,
이와 같이 잘 적용된 것을 볼 수 있다.
또한 css를 사용하지 않고도, 위와 같이 style을 이용하는 방법도 있다.
변수 사용하기
jsx는 자바스크립트 문법도 이용하므로{} 안에 변수를 넣어 출력할 수 있다. 앞서 계속 사용해왔던 것처럼 const안에 문자를 넣어 사용해도 되고,
이렇게 함수를 넣어 리턴값을 호출하는 방식을 사용해도 된다.
또한 이렇게 삼항연산자를 이용해서 출력하도록 하는 방법도 있다.