페이지 레이아웃 만들기 (React 기초문법)

오늘의 숙제 :

심심하면 html css 작성해서

다음 시간까지 여러분 웹사이트의 대문을 마음대로 꾸며옵시다. 

 

웹개발하려면 우선 유저들이 방문할 웹페이지같은게 있어야할거아닙니까

그래서 가장 먼저 웹페이지 레이아웃 만드는 법을 알아봅시다. 

page.jsx 파일이 메인페이지라서 거기에 코드짜면 되는데 

레이아웃 만들 땐 React 문법을 이용해야합니다. Next.js는 React 위에 얹혀있는 프레임워크같은거라서요. 

우선 저번시간 프로젝트 열어서 page.jsx 안의 html 내용과 global.css 안의 내용은 지우고 시작해봅시다. 

 

실은 리액트라고 다른거 없고 html css 문법 그대로 쓰면 레이아웃 만들 수 있는데 

리액트에선 html css가 아니라 JSX 라는 문법을 사용하게 되어있습니다.

생긴건 html과 똑같은데 차이가 몇개 있습니다.

---

초반 세팅하기

 

---

문법 1. return( ) 안에 HTML 넣을 때

여기도 똑같음

저기 div 안에다가 html 태그를 막 작성해주면 된다.

근데 주의점 >

리액트 버전의 문법을 사용해줘야 한다.

next.js 는 리액트 위에 얹혀사는 프레임워크 같은 것.

일반 웹페이지 생성과 4가지 정도 다른 것. 

리액트 버전 HTML = JSX 

1) HTML 을 집어넣을 때 유의 사항이 있음.

HTML 을 평행해서 여러 개 집어넣을 수 없음

= 리액트 문법 알면 웬만하게 알 듯. 

큰 div 태그로 감싸야함

---

Next.js에선 페이지마다 return( ) 안에 html 내용을 적으면

그걸 페이지로 만들어서 보여줍니다. 

근데 return ( ) 안에 html을 넣을 때 

return (
  <div>
    어쩌구
  </div>
)

언제나 하나의 html 태그로 시작해서 하나의 html 태그로 끝나야합니다. 

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

 

이런건 안됩니다. 

<div> 2개 나란히 넣고 싶으면 하나의 <div>로 더 감싸셈 

<div>를 더 넣기 싫으면 <></> 이런 무의미한 태그로 감싸도 됩니다. 

---

JSX 문법 2. class 말고 className 

2) 스타일 집어넣는 방법 

저 안녕을 빨갛게 바꾸려면

class 넣어서 css 파일을 통해 집어넣었다.

 

리액트도 그런 식으로 스타일 집어넣으면 됐음.

근데 차이점 있다.

 

우선, 저기다가 class 라고 쓰면 안됨.

className 이라고 작성해야함.

 

( 저기는 자바스크립트 작성란이기 때문에

class 를 써버리면

class 문법과 중첩되게 된다. )

저런식으로 className 을 부여한 다음,

옆에 있는 globals.css 파일로 간 다음에,

스타일링 해주면 된다.

---

html css는 원래 하던대로 똑같이 작성할 수 있는데 

다만 html에 class명을 집어넣을 때 class=" " 말고 className=" " 입력하면 됩니다. 

JSX 안에서 자바스크립트 문법들을 사용할 수도 있는데

자바스크립트 class 문법과 겹칠 수 있으니 className=" " 으로 쓰게 되어있습니다. 

export default function Home() {
  return (
    <div>
      <h4 className="title">애플후레시</h4>
      <p className="title-sub">by dev kim</p>
    </div>
  )
}

 

(global.css 파일)

body {
  margin : 0;
  background-color: #303030;
  color : white
}
 
.title {
  text-align: center;
  margin-top: 150px;
}
.title-sub {
  text-align: center;
}

그래서 메인페이지 디자인같은걸 넣어봤습니다. 

---

 

JSX 문법 3. html 안에 변수 넣을 땐 { }

쿠팡프레시 사이트 만들기 위해

태그와 클래스도 부여해줌.

export default function Home() {
  return (
    <div>
      <h4 className="title">애플후레시</h4>
      <p className="title-sub">by dev </p>
    </div>
  );
}

body {
  margin: 0;
  background: pink;
  color: black;
}

.title {
  text-align: center;
  margin-top: 150px;
}

.title-sub {
  text-align: center;
}

 

자바스크립트로 코드 짜다가

변수나 자료를 html 에다가 집어넣고 싶은 경우 알아보기

return 위에가 자바스크립트 짜는 공간임.

 이름 변수 하나 생성. 

이름을 갖다 쓸 때마다 이 자리에 park 이 출력 될 것.

 

저 name 이라는 변수를

html 자리에다가 갖다 쓰고 싶은 경우 (kim 자리)

생 자바스크립트를 썼을 때 저렇게 썻을 것.

리액트에서는 저렇게 중괄호만 써주면 됨. 

변수 작성 완료 

이것을 지칭 = 데이터 바인딩 문법 

html 속성 안에도 ( 태그 안에도 ) 중괄호 집어넣고 싶은 경우

저렇게 길게 코드 짜지 않고

변수(link) 를 하나 만들어준다

이렇게 중괄호만 집어넣어주면 된다. 

class 넣기 귀찮을 때 스타일 집어넣는 방법

예전에는 이렇게 했었음 

- 생 html 사용했을 때

리액트 상에선 무조건 중괄호 열고 사용해야함.

여러가지 스타일 넣고 싶은 경우  

이건 사실 자바스크립트 오브젝트 자료형임.

그래서 중간에 대시기호 - 이거 쓸 수 없다. 

 대시기호 -  제거하고 뒤에 오는 단어를 대문자로 써주면 됨.

 

---

JSX 문법 특징인데 변수를 html 중간에 바로바로 넣어서 보여줄 수 있습니다. 

쌩자바스크립트 사용하려면 "html 찾아서 내부 글자를 이걸로 바꿔주세요~" 라고

한 줄 길게 써야할텐데 리액트는 그딴거 필요없음 

export default function Home() {
  let name = 'park';
  let link = 'https://naver.com';
  return (
    <div>
      <h4 className="title">애플후레시</h4>
      <p className="title-sub">by dev {name}</p>
      <a href={link}>링크</a>
    </div>
  )
}

변수를 html에 넣고 싶으면 { } 중괄호 열어서 변수명만 넣으면 됩니다. 

className, id, href 이런 속성들에도 변수를 넣을 수 있는데 거기도 { } 중괄호만  열면 됩니다. 

 

---

JSX 문법 4. style 넣고 싶으면 object 자료형으로 

export default function Home() {
  return (
    <div>
      <h4 className="title" style={{ color : 'red', fontSize : '20px' }}>애플후레시</h4>
      <p className="title-sub">by dev {name}</p>
    </div>
  )
}

className 말고 style을 집어넣어서 빠르게 스타일을 줄 수도 있습니다. 

보기는 더러울 수 있는데 애니메이션같은거 주려고 동적으로 스타일 변경할 때 가끔 씁니다. 

style은 항상 object 자료형식으로 작성한 후에 style={ } 안에 넣으면 됩니다.