Sohn SooKyoung

💛💚

6 분 소요

🔮 JSX 사용법

1️⃣ 사용자 지정 태그 만들기

  1. src > 파일 생성

    //src > MyHeader.js
const MyHeader = () => {
  return <header>MyHeader</header>;
};

export default MyHeader;

  2. src > App.js

    import "./App.css";
import MyHeader from "./MyHeader"; //🌟 넣고 싶은 태그 파일 임포트 하기

function App() {
  return (
    <div className="App">
      <MyHeader />
      <h2>안녕 리액트</h2>
      <b>
        React.js <br></br>
      </b>
    </div>
    //닫는 태그 반드시 필요! <img /> <br /> 태그도 반드시 닫는 태그 필요
  );
}

export default App;

  3. npm start를 통해서 결과 확인

❗ 닫는 태그 반드시 필요! <img /> <br /> 태그도 반드시 닫는 태그 필요 ❗

2️⃣ css 스타일링

App.css를 통해서 css 스타일링을 할 수 있다.

//App.js
import "./App.css"; //🌟
import MyHeader from "./MyHeader";
import MyFooter from "./MyFooter";

function App() {
  return (
    <div className="App">
      <MyHeader />
      <h2>안녕 리액트</h2>
      <b>
        React.js <br></br>
      </b>
    </div>
    <MyFooter />
  );
}

export default App;

//App.css
.App {
  background-color: black;
}
h2 {
  color: red;
}
#bold_text {
  color: cyan;
}

3️⃣ 인라인 스타일링

객체를 생성항 다음, 태그에 style={객체 이름.태그/클래스/id} 를 통해서 css를 적용시킬 수 있다.

import MyHeader from "./MyHeader";
import MyFooter from "./MyFooter";

//인라인 스타일링
function App() {
  let name = "손수경";
  const style = {
    App: {
      backgroundColor: "black",
    },
    h2: {
      color: "red",
    },
    bold_text: {
      color: "cyan",
    },
  };

  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>
        안녕 리액트 {name} {number}
      </h2>
      <b id="bold_text" style={style.bold_text}>
        React.js
      </b>
      <MyFooter />
    </div>
  );
}

export default App;

4️⃣ {}을 이용하여 값 사용하기

const number = 5;
<p> {number} </p>;

이런 식으로 값을 사용할 수 있다. 대신, 값을 포함 하고 있는 요소여야 한다. 빈 배열, false 같은거는 불가!

import MyHeader from "./MyHeader";
import MyFooter from "./MyFooter";

function App() {
  //인라인 스타일링
  let name = "손수경";
  const style = {
    App: {
      backgroundColor: "black",
    },
    h2: {
      color: "red",
    },
    bold_text: {
      color: "cyan",
    },
  };

  const number = 5;
  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>
        안녕 리액트 {name} {number}
      </h2>
      <b id="bold_text" style={style.bold_text}>
        React.js <br></br>
        {number} 는 {number % 2 === 0 ? "짝수" : "홀수"}
      </b>
      <MyFooter />
    </div>
  );
}

export default App;

🔮 state

state란 상태라는 의미로, 리액트에서의 상태를 관리하는 것을 의미한다. 예를 들어서 다크 모드와 라이트 모드가 있다. 사용자가 버튼을 통해서 변경시킬 때마다 그 값이 적용되어서 변경이 되는데, 이때, 사용자가 선택한 모드는 상태가 되는 것이고, 컴포넌트(.js 파일)은 이 상태를 가져와서 페이지에 리랜더 한다.

📍 컴포넌트 만드는 방법

많이 사용하고 당연한 기본이므로 꼭 숙지해 둘 것!

  1. src 폴더에 원하는 기능의 js 파일을 만든다. 리턴을 html 코드로 작성하여서 페이지에 그릴 수 있게 할 수 있다. (jsx이므로,,,)

    return (
  <div style=>
    {children}
  </div>
);

    여기서 코드 마지막에는 반드시 export default Counter; 를 붙힌다. 그래야 App.js에서 사용할 수 있다.

  2. App.js 파일에서 <사용자 정의 태그 /> 을 통해서 1번 과정에서 만들었던 코드를 사용할 수 있다. 이때, 여기서 임포트를 해주어야 하고, 아까 export를 해주지 않았다면 그 태그는 일반 html 태그로 인식 -> 적용 X인 상태가 되므로 반드시 1번 과정에서 export default Counter; 를 붙혀야 한다.

  3. 2번 과정에서 태그를 만들었다는 말은 컴포넌트 파일에서 작성했던 코드를 이름 하나로 압축 시켰다고 생각하면 된다.

📍 간단한 카운트 컴포넌트 만들기

  1. Counter.js 
const Counter = () => {
  return (
    <div>
      <h2>0</h2>
      <button>+</button>
      <button>-</button>
    </div>
  );
};

export default Counter;
  1. App.js에 적용시키기
import MyHeader from "./MyHeader";
import Counter from "./Counter";

function App() {
  return (
    <div>
      <MyHeader />
      <Counter />
    </div>
  );
}

export default App;

버튼을 만들고 0인 상태로 페이지가 시작된다. +를 누르면 +1이 되고, -를 누르면 -1이 되는 기능을 만들 예정이다. -> 그러면 어떻게 적용시킬까?

onIncrease 함수와 onDecrease 함수를 만들고 버튼을 클릭(onClick)하면 함수가 적용될 수 있게 한다.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

export default Counter;
  • const [count, setCount] : 상태를 변경시켜주기 위한 배열이다. 객체 비구조화 할당 방법으로 자세한 사항은 js 응용부분에서 확인할 수 있다.
  • onIncrease : +1을 시켜주기 위한 함수이다.
  • onDecrease : -1을 시켜주기 위한 함수이다.

위 useState의 적용과정은 다음과 같다.

useState(0)은 0으로 초기화한 값을 배열의 0번째 인덱스 count값으로 넘겨주면 setCount를 통해서 상태가 업데이트가 되고, h2태그의 {count} 값으로 넘겨주어서 리랜더한다. -> +를 클릭하면 onIncrease 함수가 적용이 되고, +1이 된 값을 useState 로 넘겨준다. 그러면 count 의 값이 변경되고, setCount 를 통해서 상태 변화가 업데이트가 되어 {count} 의 값이 변경되는 것이다.

🔮 Props

위의 Counter 컴포넌트에서 +/- 버튼을 눌렀을 때의 상황에서 state에 대해서 공부하였다. 하지만 최상위 컴포넌트(App.js)에서 초기값을 변경시키고 싶은 경우가 있을 수 있다. 이때 사용하는 것이 props 이다.

props는 property의 약자로, 다양한 초기값을 spread형식으로 설정할 수 있다. spread에 대한 자세한 내용은 js 응용 부분에서 확인할 수 있다. 

//App.js
import MyHeader from "./MyHeader";
import Counter from "./Counter";

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
  };
  return (
    <div>
      <MyHeader />
      <Counter {...counterProps} />
    </div>
  );
}

export default App;

❓ 그럼 이 counterProps 값을 Counter.js에서 어떻게 사용할까?

💡 counterProps를 Counter 함수의 매개변수로 가져오면 된다.

//Counter.js
const Counter = (props) => {
  console.log(props);
  //객체 안에 담겨져서 옴 {initialValue: 5}
  //{a: 1, b: 2, c: 3, d: 4, e: 5, …}

즉, props = counterProps 객체 가 된다.

❓ 여러 가지 객체 요소에서 한가지 요소만 사용하기 위해서는 어떻게 해야될까?

💡 객체 비구조화 할당 방법을 활용하면 된다.

//App.js
import MyHeader from "./MyHeader";
import Counter from "./Counter";

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    initialValue: 0,
  };
  return (
    <div>
      <MyHeader />
      <Counter {...counterProps} />
    </div>
  );
}

export default App;

//Counter.js
import React, { useState } from "react";
import OddEvenResult from "./num";
const Counter = ({ initialValue }) => {
  console.log({ initialValue });
  const [count, setCount] = useState(initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
      <OddEvenResult count={count} />
    </div>
  );
};

export default Counter;

initialValue값을 사용하고 싶다면, 객체의 key값을 넣어서 사용하면 되는데, 값을 사용하기 위해서는 {}를 사용해야되므로 {initialValue} 로 사용한 것이다.

❓ 만약에 사용하고 싶은 키값이 객체에 정의되어 있지 않다면?

💡

Counter.defaultProps = {
  initialValue: 0,
};

사용하기

🌗 활용

🥅 나오는 값이 짝수인지 홀수인지 판단하기

  1. OddEvenResult.js 컴포넌트 만들기

    //OddEvenResult.js
const OddEvenResult = ({ count }) => {
  console.log("Render");
  return <>{count % 2 === 0 ? "Even" : "Odd"}</>;
};

export default OddEvenResult;

    그려진 값이 짝수이면 Even을 홀수이면 Odd를 출력하여 그린다. 즉, html형식으로 결과값을 출력하고 있으므로 바로 태그로 사용 가능!

  2. 부모 컴포넌트에 태그를 추가하기

    OddEvenResult.js는 Counter.js의 하위 컴포넌트이다. 즉, Counter에서의 count값을 구분하여 출력하는 것이므로 Counter.js 파일에 OddEvenResult 컴포넌트를 추가해준다.

    import React, { useState } from "react";
import OddEvenResult from "./num"; //🌟
const Counter = ({ initialValue }) => {
  console.log({ initialValue });
  const [count, setCount] = useState(initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
      <OddEvenResult count={count} />
    </div>
  );
};

Counter.defaultProps = {
  initialValue: 0,
};

export default Counter;

🥅 컨테이너 만들기

  1. Container.js 컴포넌트를 만들기

    //Container.js
const Container = () => {
  return (
    <div
      style=
    ></div>
  );
};

export default Container;

  2. 부모 컴포넌트에 태그를 추가하기

    Container.js의 부모 컴포넌트는 App.js가 된다.

    //App.js
import MyHeader from "./MyHeader";
import Counter from "./Counter";
import Container from "./Container";

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
  };
  return (
    <Container>
      <div>
        <MyHeader />
        <Counter {...counterProps} />
      </div>
    </Container>
  );
}

export default App;

    컨테이너는 지금 div 태그를 감싸고 있으므로 이를 불러와서 그려주어야 한다.

  3. Container.js 수정

    const Container = ({ children }) => {
  return (
    <div style=>
      {children}
    </div>
  );
};

export default Container;

💡 download1 –> 최종 모습

📍 state, props 특징

  1. 컴포넌트는 본인이 가진 state가 변경될 대마다 리랜더된다.(다시 그려진다.)

  2. 자신에게 내려오는 props가 변경될 때마다 리랜더 된다.

  3. 부모 요소가 변경되면 리랜더 된다.

태그:

카테고리:

업데이트:

댓글남기기

참고