[React 입문] React 문법 (JSX) 규칙 7가지

React Component (리액트 컴포넌트)

컴포넌트는 두가지 작성 방식이 있습니다.

• function(함수) 형태

• class (클래스)형태

import React from 'react';

function Hello() {
  return (<div>Hello React</div>);
}

export default Hello;

 

3가지로 나누어 볼 수 있을 것 같습니다.
-> 불러오기 (import)
-> 함수
-> 내보내기 (export)

 

return하는 부분이 마치 HTML같이 생겼지요?
(생활코딩에선 유사 HTML이라고 칭하던데!)

 

리액트 컨포넌트에선 이와같은 XML 형식을 JSX라고 부릅니다.

JSX란

• 자바스크립트 문법 확장
• UI 가 어떻게 실제로 보일지 설명
• XML -> Java Script (Babel, 바벨이란 도구가 변환시켜줌)

 

JSX 문법 규칙 7가지

1. 무조건 닫는 태그가 필요하다.
   무슨 당연한 소리냐고 할 수 있지만
   HTML에서 보통 input과 br같은 경우 그냥 써도 무방하기 때문에 보통 실수를 많이 할 수 있다.
   
   아무튼 무조건 닫는 태그 필요!
   
   Good
   

   <input/>

2. 여러태그들이 있으면 무조건 감싸주는 태그가 필요하다
   제일 이해가안되는 부분 중 하난데
   1Depth에 있는 태그가 여러개이면 안된다..!
   
   bad 
   

   return(
   <div></div>
   <div></div>
   );

   
   Good

   return(
   <div>
     <div></div>
     <div></div>
   </div>
   );

   return(
   <>
     <div></div>
     <div></div>
   </>
   );

3. return 할때 ()는 단순 가독성을 위한 것
   불러오기 / 함수 / 내보내기 
   에서 사용되는 ;또한 가독성, 개취 라고합니다.
   
   불러오기에선 파일 경로를 입력할 때 '.js'또한 생략해도 되고 이또한... 가독성, 개취...!
4. style 적용할때 객체를 만들어 사용해야한다.
   기존HTML,JS 알고있던 것과 다른것 중 하나..!
   
   그냥 인라인 스타일 적용을 하면 안먹히니 객체를 만들어 사용해야합니다.
   
   + cf.
    font같은 경우 숫자만 적으면 default px단위
    단위까지 적어주고 싶다면 ''문자열로 적어주기!
   
   
   bad
   

   <span style="color: #409d00;">Good</span>

   
   Good
   

   const style={
   	color: #409d00;
       backgroundColor: #000;
   }
   
   return(
   	<span style={style}>Good</span>
   );
   

5. 속성(attr)값 중 -(하이픈)으로 구분 되는 값들은 다 카멜체로 사용해야합니다.
   

   위 예제처럼
   기존 css 속성 값 중 background-color 와같은 하이픈(-)으로 구분되는 속성 값들은 
   다 카멜체로 바꾸어 사용해야합니다.

6. class 적용대신 className으로!
   태그안 속성에 class 주는게아니라
   className으로 사용해야합니다.
   
   (class라고해도 먹히긴 하는데 개발자도구(F12)들어가보면 에러가 맞이하고있을 겁니다^-^)
7. 주석 사용
   개발자 도구(F12)에서 노출 안됩니다.
   직접 작성보다 Ctrl+/로 작성하는게 심적 건강에 도움되는 것 같습니다.
   
   

 

{/* 주석1 */}
// 주석2

 

리액트 입문 2..? 3?일차인데..
생활코딩으로 강의듣다가 벨로퍼트강의듣고있는데 좋군요(둘다 좋아요)

 

정리용도로 notion, Google Drive 둘다 쓰고있는데 공개용으로 티스토리에 작성해봤는데

와우..! 음 티스토리를 떠나야 될것같습니다:-)

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ너무 작성하는데 불편하네요... 이전부터 느꼈지만 

코드라인 많이 쓰기도 불편하고... 들여쓰기, 복붙등 안되는게 많아서 html모드가서 수정해야되는 두번의 번거로움이!!.. 흑..

 

참고링크 https://react.vlpt.us/basic/04-jsx.html

4. JSX · GitBook

다들 안녕히..!

(티스토리글 이제 자주쓸려했는데 새로운 블로그 작성공간을 탐색해봐야될것같슴다..!)