2023-01-03 JSX 문법

Welcome to JSX World

 

그림 요소와 기능 요소를 합치자!

• js 는 중괄호! { }
• return 소괄호 안에 <> html 요소를 넣으면 된다

 

html 요소 안에  {str} js..

 

 

우리는 jsx 문법을 사용하지만 결과적으로 브라우저는 js코드를 받게 된다.

바벨이 jsx를 순수 js로 번역하여 브라우저에 전달한다.

 

---

JSX 문법

기존 HMTL과 JS에서 쓰던 것과 달리 규칙을 지켜야한다.

번역기인 BABEL이 헷갈려 할 수 있어서!

 

1. Class? ㅡ> ClassName

html인지 js인지 헷갈려 하기 때문에 규칙을 정했다.

 

리턴 내부에

html에 className이라고 해줘야 합니다.

 

 

2. 카멜표기

Kebob-case to camelCase

소문자 시작 , 연결부위 대문자!

JSX에서는 반드시 카멜케이스를 사용해줘야 함

 

JS로 번역할 때 '-'는 빼기의 의미를 가진다.

빼기냐 kebob 케이스냐?.. babel이 헷갈려합니다 !

 

 

 

3. 데이터 바인딩 ( 데이터 불러오기 )

{ } 열고 js를 넣으면 바로 데이터가 들어간다.

 

함수 부르기

이미지 부르기

 

변수 부르기

 

인라인 스타일 적용하기

html 에서 인라인 스타일

옛날 방식으로 하면....

맨 아래 오류를 보면 ㅡ> 스타일을 적용하고싶으면, 객체 형태로 하라고 오류가 떠있다.

상냥한.. 페이스북

 

경고대로 형태를 객체형태로 바꿔보자!

인라인 스타일을 적용하려면 객체 타입으로 전달해야 한다~

새로 고침하면, 오류가 사라질것 당황 ㄴㄴ

 

 

그럼 객체를 선언해서 전달은?

이렇게 하면 틀리다 

 

이미 fontStyle이 객체 형태라서 {{}}로 감싸면 적용되지 않는다.

{ fontStyle }로 하면 됩니다.

이런식으로도 가능하다!!

 

 

---

이벤트 핸들러 적용하기

onclikc? ㅡ> onClick

리엑트에서는

onClick = { 클릭 되었을 때 실행할 js 코드 }

onClick = { () => { alert("클릭!") } }> 클릭 < /sapn>..

 

익명 함수 정의 부르기

 

 

 

 

 

정의하지 않고 부르면.. 클릭하기도전에 떠버린다. > 오류가 많다.. 정의 하는게 좋다

 

 

 

 

 

 

위에서 정의하게 되면, 바로 실행되지 않는다.

 

정의가 됬음에도 바로 실행하고싶으면 

onClick=printConsole()

소괄호를 붙여서 실행하면 된다.

 

 

 

 함수 호출이 아닌 경우라면?

함수를 선언해서 호출하는 경우가 아니라면, {} 

 

 

함수를 정의해주지 않는다면,

친절한 리엑트는 이렇게 가르쳐 줍니다..

함수를 정의해주면

제대로 작동합니다.

 

 

---

실습 1 이벤트 핸들러

 

import './App.css';

function App() {
  const styleTest = { marginTop : "32px", backgroundColor : "skyblue"};
  const helloStr = "Hello, first exercise";
  return (
    <div className="App">
      <div style={styleTest} onClick={ () => {
        alert('클릭 됨')
      }}>{helloStr}</div>
    </div>
  );
}

export default App;

1. 인라인 스타일은 반드시 객체 형태로 

2. { 키 :  "값" }

3. 이미 객체로 선언한 스타일이니 중괄호를 할필요 없다 style = { styleTest }

4.  onClick 함수 정의 안해주면, 바로 알림뜨니 조심!!

 

---

Webpack

현업에서 쓸 일이 있을 수 있다.

개념만 정리 하겠다!

webpack

webpack

js는 사실 별 기능이 없던 언어

= 그래서 브랜던 아이크가 자바를 배껴서 단 10일만에.. 만들었다.

그런데 웹이 커지고, 점점 더 요구하는 기능이 많아져 점점 커졌다.

그런데 이건 웹이죠? 즉 통신을 기반으로 한 서비스 

 

모든 기능을 넣자니 용량의 문제가 생겼다.

필요한 순간에 모듈형태로 불러 사용하고, 필요없을때는 기능을 다 빼고 빌드를 하는 방식으로 사용됬다.

그런데 이것을 모든 브라우저가 지원하지 않는다.

 

그래서 등장한 것이 Webpack입니다.

의존성이 있는 모듈을 모아 하나의 파일로 만들어주는 역할을 한다.

내가 만든 서비스를 위한 모듈들을 필요한 것만 남겨 순수한 코드로만 남긴다.

앞의 여러 확장자 파일들을 

다양한 라이브러리 들을 가져와 쓰게 될 텐데...

 

번역해주는 라이브러리가 없이는.. 브라우저들은 이해하지 못한다.

결과적으로 배포 할 때 => 브라우저가 라이브러리 없이도

우측에 있는 4개 + html을 이해할수 있도록 남게 하는 기능

 

 

예시 별기능도 없는데 왜 1.7mb..?

통신을 통해 이런것을 주고 받으면, 부담스럽다.

리액트에 필요한 필수 모듈 등이 전부다 들어가 있기 때문

웹팩이 압축하기 전이라 그렇다

=> 빌드 해보자

 

빌드 해보기

페이스북이 만든 명령어 

npm run build

띄어쓰기, 앤터 2바이트 소모하기때문에 컴퓨터 입장에서는 이렇게 되어있다.

순수 js로 압축하고 있는 것!

 

npx serve -s build

build 폴더에 있는것을 해봐!

로컬 3000번 가서 확인해보셈!

163 kB 용량이 완전 줄어들었다! wow

 

 

---

핵심개념 Component

vritual DOM '변화가 일어난 것만 바꿔그리겟다' 의 단위!

ex)좋아요 버튼을 누르면  그 부분만 바뀌는 것처럼 / 새로고침이 없고 사용자 친숙한 환경 제공

 

Component

• 그림과 기능 구현이 가능한 독립적 구성하여 재사용이 편리
• 코드가 분리되어있어 재사용이 가능하다.
• 데이터 속성(props)으로 받고, 상태(state)에 따라 View를 변화 합니다.

 

즉, 쇼핑몰에서 상품 목록 페이지를 하나하나 다 그려줄 필요 없이 하나의 컴포넌트만 만들고

변화되는 데이터만 props로 전달하여 재사용 하면 됩니다!

> 에어비엔비의 사진들은 사진주소, 데이터만 다름 컴포넌트만 호출해주면 된다.

 

폴더 components 를 만들어줍니다

 

그 안에 mainHeader.js 파일 만들어준다

 

컴포넌트 만드는 법

1. 메인헤더 파일에 그림요소를 넣는다.

2. 외부에서 기본적으로 쓸 수 있도록 export default 메인헤더 ;

3. src > App.js 

에서 컴포넌트를 불러옵니다.

 

4. 우리가 웹팩 하고 있던 것을 종료

 

5. npm start 

빌드된 코드가 아닌 작성된 코드 불러오기

 

 

만약 카멜표기법 으로 했으면 ?

오류가 뜰텐데 PascalCase 를 쓰라고 콘솔에 오류가 떠있을 것이다.

함수지만, 리액트에서는  컴포넌트를 PascalCase 로 사용하도록 규제하고 있다.

 

 

---

 

Componet의 종류

컴포넌트는 크게 두가지

• 클래스형 
• 함수형

 

클레스형 컴포넌트

• 최초로 사용된 컴포넌트
• js의 class와 유사하기 때문에 자연스레 사용됨
• 오래 된 만큼 리액트의 장점 모두 활용 가능 ( 라이프 사이클..이라던가.. )
• 다만, 메모리 자원도 더 먹고 느린 단점
• 그리고 render라는 함수를 사용해야만 그릴 수 있다.
• 최근에는 상대적으로 가볍고 사용이 쉬운 함수형 컴포넌트에게 완전히 밀렸다.

 

우리가 구현할 일은 없어.. 이리 생겼다는것만 알자

나중에 직장에 가면, 이런것이 있을 수 있다

render라는 함수안에 return을 해줘야만 그림요소를 사용할 수 있다.

리액트를 하다 class가 나타난다면 당황하지 말자

 

 

함수형 컴포넌트

• js에서 익숙하게 사용하였던 함수를 컴포넌트화 시킴
• 아무래도 구조 자체가 클래스에 비해 단순하고 코드도 단순하고 빠르게 배울 수 있다.
• 메모리도 덜 먹고 빠르다 (render 함수가 x / 클래스에 필요한 메모리 불필요 )
• 다만 예전에는 리액트의 중요 기능 사용이 불가능 제한적으로 사용 ㅡ> 최근에는 Hooks라는 기능의 도입으로 같은 역할 수행 가능 !
• * Hooks : 클래스형 컴포넌트에서 사용하던 리액트의 기본적인 기능
• 최근에는 이것만 쓴다.

임포트, 랜더함수 없어 짧다.

 

 

---

2. 실습 MainHeader.js를 클래스형 컴포넌트로 변환해봅시다

위에 우리가 했던 함수형을 클래스형으로

//MainHeader.js class 형태로

import React, { Component } from 'react';

//클래스 상속, 정의
class MainHeader extends Component {
    render(){
        return (
            <h1>Hello, Class component World</h1>
        )
    }
}

export default MainHeader;

//class 컴포넌트 불러오기
import './App.css';
//3. mainHeader 라고 치면 밑이 자동 완성
import MainHeader from './components/mainHeader.js';

function App() {
  return (
    <div className="App">
      {/* 4. 컴포넌트는 < />로 씁니다. */}
      <MainHeader />
    </div>
  );
}

export default App;

---

함수형 컴포넌트의 함수형이라는 것은..

위에서 했던것처럼 파일로 불러오는 것이 아닌, 함수로 쓸 수 있다.

이렇게 함수형 내부 정의로 쓸 수 있지만,

보다 싶이 return이 두 개로 효율적이지 않기 때문에 파일형을 쓰는 것이다.

 

---

 

실습 3

컴포넌트 두 개

하나는 함수형 - 이미지

하나는 클래스형 - 버튼

내가 간과 한 점..

컴포넌트 파일을 하나만 쓰려고 했던 점!

img, btn 따로 생성하면 됬었다.

 

이미지 컴포넌트

//1. js 적으로 하는 법 => import로 불러오는 방법, 이미지의 주소값을 가지는 변수
// js적으로 한다면 * src 내부에 있는 파일만 접근이 가능하다. 즉 import logo from '../../logo.svg'; 는 안됨~!!!!!
import logo from '../logo.svg';


function ImgComponent() {
  return (
    <img src={logo} alt="이미지" />
    // src를 벗어난 파일을 쓰고 싶다면 ! static 설정을 해줬을 시
    // 2. 페이스북에서 지정한 public 파일을 쓰면 된다 ./파일명
    // <img src='/logo192.png' alt="이미지"/>
  )
}

export default ImgComponent;

//컴포넌트 불러오기
//3. mainHeader 라고 치면 밑이 자동 완성
// import MainHeader from './components/mainHeader.js';
// 4. 컴포넌트는 < />로 씁니다.
import './App.css';
import BtnToNaver from './components/BtnToNaver';
import ImgComponent from './components/ImgComponent';


function App() {
  return (
    <div className="App">
      <ImgComponent />
      <BtnToNaver />
    </div>
  );
}

export default App;

 

1.  js방법적

import 변수이름 from '이미지 경로' ;

변수에 이미지 경로를 저장 합니다.

 

그 후

함수에

<img src={변수명} alt="이미지" />

 

그리고 밖으로 내보내주고

 

App.js에서

<ImgComponent />로 호출 해줍니다.

 

다만 이 방법은 src 내부에 있는 파일만 접근이 가능합니다.

 

2. src를 벗어나 페이스북에서 지정한 public 폴더를 쓰는 방법

<img src='logo192.png' alt="이미지" />

public 폴더의 이미지를 불러올 수 있습니다 ^^

 

 

클래스형 컴포넌트 버튼

//1.클래스는 항상 import React, { Component } from 'react';
import React, { Component } from 'react';

//2. 선언만 된 상태
class BtnToNaver extends Component {
    render(){
        return (
            <a href='https://www.naver.com/'>네이버 이동</a>
        )
    }
}
// 3. 밖으로 내보내주기
export default BtnToNaver;

1. 항상 import~ 시작

2. 선언

3. 내보내주기

4. App.js 파일에서 <BtnToNaver / >로 호출!