React.js - JSX에서 속성(attribute)를 표현하기

---

리액트에서 속성을 사용하기

---

 

안녕하세요.

고코더 입니다.

 

 

● 1.  JSX에서는 속성을 표현할 때는 큰따옴표를 사용합니다.  그리고 JSX는 HTML 기반이기에 속성(attribute) 값은 대부분 같습니다. 하지만 다르게 정의된 값이 있는 것도 알아야 합니다. 그중에 가장 대표적인 속성명은 className입니다. 원래는 class라는 이름으로 많이 봐왔지만 리액트에 한해서는 다르게 사용됩니다. 이 두 가지를 가지고 예제를 한번 보여드리겠습니다.

 

● 2.  CSS에서 아래와 같이 속성에 사용할 스타일의 요소를 추가하였습니다. 이를 JSX에서 사용해보겠습니다.

.bluelif { color: blue; }

 

● 3. JSX에서 속성을 사용할 때는 큰 따옴표를 감쌉니다. 

1번째 라인 : class 대신 className으로 사용합니다. , 속성의 값을 큰 따옴표로 감쌉니다. ""

const element = <p className="bluelif">속성(attribute)은 큰 따옴표를 씁니다.</p>

ReactDOM.render(
  element,document.getElementById('root')
);

 

● 4.  완성된 소스는 역시 코드펜에서 확인해보세요.

https://codepen.io/gocoder-net/pen/LYRvzaQ

See the Pen JSX에서 attribute 표현하기 by GoCoder (@gocoder-net) on CodePen.

 

---

마무리

---

 

따옴표 만나니 반갑네요