jsx
-
[Next.js] 3. 페이지 레이아웃 만들기프론트앤드/[Next.js] 2023. 7. 5. 17:43
웹사이트 레이아웃을 만드려면 html, css를 작성해야 한다. next 에서는 ? 리엑트버전 (jsx) html, css를 사용하면 된다 1. return () 안에 HTML넣을 때 : 평행해서 태그들을 2개이상 넣을 수 없다. (전체를 감싸는 하나의 태그가 있어야 한다) 2. 스타일 적용하고 싶을 때 : className 이라고 써야한다. ex) 3. HTML안에 변수 넣을 때 : { } 중괄호 안에 넣어준다. (jsx의 데이터바인딩 문법 이라고도 불린다) 중괄호 안에 넣어주었고, 결과는 위의 화면과 똑같은것을 확인 할 수 있다. 4. style 속성을 넣으려면 style={ { 어쩌고 : 저쩌고 } } : 중괄호 두개를 이용한다 : 이 때, -기호가 들어가야 하는 font-size 같은 속성은 fo..
-
JSX 특징카테고리 없음 2023. 1. 25. 00:42
JSX 란? : React에서 사용하는 자바스크립트 확장 문법으로써, HTML과 Javascript를 섞어놓은듯한 형태이다. : JSX는 자바스크립트 내에서 마크업을 작성할 수 있고, 로직도 함께 작성할 수 있는 장점을 가지고 있다. 특징 1. JSX 는 자바스크립트의 값(vlaue) 이다. : 값이라고 하면, 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나, 함수의 리턴값으로 사용할 수도 있다. 2. JSX는 자바스크립트 값을 포함할 수 있다. : JSX에서 자바스크립트 값을 사용하려면 {} 중괄호를 이용하여 자바스크립트의 값을 감싸주면 된다. name 이라는 변수를 선언하고, Hayley Lee 라는 값을 할당하였다. 이때, JSX 안에서 이 값을 사용하기 위해 {name} if문, ..