Javascript + XML, ECMA Script 6 표준 사용, JSX내에 스타일시트를 포함함, 웹의 CSS와 많은 개념을 공유하지만 독자적인 포맷, CSS파일로 작성 불가
JSX 사용 시 주의 점
1. 컴포넌트에서 여러 Element를 렌더링 할때 꼭 Container element안에 포함시켜야 한다.
"
Container element : <div>, <article>, <section>, <header>, <footer>, <form>, and more.
"
예를들어 reder 함수안에 <div>를 사용하지 않고 코드 사용시 에러가 발생한다.
이유는, Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 ㅅ ㅜ있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야 한다는 규칙 때문
2. jsx안에서 javaSript를 표현 할때, {} 로 wrapping 하면 된다.
render(){
let text = "Hi"
return(
<div>{text}</div>
);
}
3. if else 문은 jsx에서 사용불가, 이에대한 대안으로 tenary expression condition ? true : flase 사용된다.
render(){
return(
<p>{1==1? 'True' : 'False'</p>
);
}
또는,
1===1 && <div>맞다!</div>
4. JSX안에서 Style을 설정 할때는, string형식을 사용하지 않고 key가 camelCase인 객체가 사용된다.
예를 들어, background_Color => backgroundColor
render(){
let style={
color : 'aqua',
backgroundColor: 'black'
};
return(
<div style={style}>React CodeLab</div>
);
}
5. JSX안에서 class를 설정 할 떄는 class=가 아닌 calssName=을 사용해야한다
render(){
return(
<div className="box">CodeLab</div>
);
}
6. ES6를 적용, 변수의 저장공간을 두개로 나눴다(let, const)
기존의 var의 경우 스코프의 설정 후, 내부의 스코프가 하나 더 생겨도 큰 스코프 안에서 변수가 공유된다. 이것은 함수형 체계인 자바스크립트의 문제이기도한데, 변수의 중복도 중복인데 재활용측면에서도 별로 좋지 않다.
ES6의 경우 const, let을 통해 변수의 활용을 명확하게 나타낼 수 있다.
const : 한번선언 한 후, 변경되지 않음
let : 유동적인 값
'개발자 일기 > React' 카테고리의 다른 글
리엑트 네이티브 (0) | 2020.07.04 |
---|---|
Virtual DOM (0) | 2020.06.30 |
댓글