[React] 기본문법

리액트 기본문법도 익힐 겸 간단한 로그인 폼 제작을 해보겠습니다.

 

기본적인 틀은 이렇습니다.

이때 주의할것이 있는데 return 안쪽에서 태그는 두개 이상 기입하면 안됩니다.

 

같은 라인에 태그를 2개 기입하니 오류를 알려주는 모습

 

따라서, 하나의 박스에 감싸서 태그를 처리하도록 해야합니다.

 

 

 

1. class는 className으로 

 

HTML 작성과는 다르게 class는 className으로 작성해주어야 합니다. 

그 이유는, 리액트는 JSX문법을 사용하고 있기 때문입니다.

따라서, HTML에서 작성하던 몇몇의 문법이 다릅니다.

 

JSX는 일종의 자바스크립트이기 때문에 class를 적으면 자바스크립트의 예약어인 class와 혼동되기 때문에 주의해야합니다.

 

className을 써 작명해준 모습

 

 

 

2. 셀프클로징

 

 

 

 

input, img 등등 닫는태그 없이 홀로 사용되는 태그일 경우 태그 끝에 /를 붙여 셀프클로징 할 수 있도록 합니다.

 

참고로 , 밑의 주석같은 경우 {} 안에 담기는데 {}안에는 js문법도 담아주도록 합니다.

 

 

 

 

 

3. style에는 중괄호가 2개

 

 

css같은경우 app.css에서 작성해 주고 import해도 되지만 태그에 바로 담을경우 {{스타일명 : 스타일 값}}으로 담아주어야 합니다

또한, 속성명도 camelCase로 작성해 주어야 제대로 스타일이 들어갑니다

 

 

 

 

몇 가지 기본문법으로 완성한 코드입니다. 이 코드를 터미널창에서 npm start 시켜보면

 

 

 

잘 나오는 모습을 볼 수 있습니다. 참고로 배경이나 인풋, 버튼창의 스타일은 app.css에서 작성하였습니다.