React, JAX 사용방법
- Web/React
- 2021. 10. 30.
React, JAX 사용방법
유튜브 - 출처
https://www.youtube.com/watch?v=FqnAFX9lQPQ
본 내용은 코딩애플님의 Youtube 내용을 참고하여 공부하였습니다.
데이터 바인딩 방법
데이터 바인딩, JavaScript에서 Script의 데이터를 HTML에 넣기 위해서는 .innerHTML 함수가 필요했다.
그러나 React는 중괄호를 이용해서 데이터 바인딩을 쉽게 할 수 있다.
그리고 이는 함수 또한 데이터 바인딩이 가능하다. test() 함수의 return 값은 100이므로, 출력값은 100으로 출력된다.
이미지 불러오기
이미지 또한 간단하게 가져올 수 있다.
상단의 import를 이용하여, 이미지의 경로를 지정하면, logo라는 image를 쉽게 불러올 수 있다.
Class 이름 정할 때, 주의
React의 Class의 정의는 className 이다.
React에서는 class라는 함수를 별도로 사용하기 때문에, class 지정시, Name을 뒤에 붙여야 한다.
css를 Class 명이 아닌, style을 사용하고 싶다면, 중괄호를 사용한다.
이 또한 html하고 크게 다른것은 없다.
다만, 중괄호를 보면 혹시나 하겠지만 역시나 style 또한 데이터바인딩이 가능하다.
그리고 React에서는 css정의 시, 명칭이 조금씩 달라지므로 이 부분을 주의하여야 한다.
마무리
React를 한다면, JavaScript를 알면 쉽다고 한다.
필자는 어렵다.
반응형
'Web > React' 카테고리의 다른 글
[React] useState사용하기 (0) | 2022.12.11 |
---|---|
[React] axios 사용하기 (0) | 2022.12.05 |
[React] onClick 이벤트 만들기 (0) | 2022.12.03 |
[React] Route 사용하기 (0) | 2022.08.21 |
[React] npm WARN config global '--global', '--local' are deprecated. Use '--location=global' insted. (0) | 2022.08.18 |