목록jsx (1)

웹개발일지

[입문] JSX 기초 문법, 데이터 바인딩

리액트 프로젝트를 열면 App.js가 있다. 처음 리액트를 마주했을 때 궁금했던 점이, js파일에 html 코드를 작성해서 띄운다는 점이었다. 원초적인 방법으로 생각해보면 html을 만들고 만든 html 파일을 불러와 띄우는 것인데, 요 App.js에 쓰여진 코드를 보아하니 App() 함수 안에서 return 함수를 사용하여 html코드들을 반환해주고 있더라. 요게 단순히 js 문법만은 아니고, 이렇게 리액트에서 html 코드를 js파일에서 사용할 수 있게 하는 JSX 문법이 따로 있다.   간단히 보면 우선 div 코드와 h4코드가 쓰였다. div태그에는 css 속성인 className이, h4태그에는 값으로 {post} 변수가 들어가 있다. 이 때, 변수를 불러와 바로 보여주기 위해 {}를 써서 연결..
React 2024. 10. 14. 23:29
이전 Prev 1 Next 다음