[React.js] 리액트 기초 - Import/Export, Style, Event

Import/Export

src/component/Hello.js

Export

const Hello = () => {
  return <p>Hello</p>;
};

export default Hello;

 

export default function Hello() {
  return <p>Hello</p>;
}

Import

 

src/App.js

import "./App.css";
import Hello from "./component/Hello";

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

export default App;

---

React.js 로 스타일을 지정하는 방법

1. 태그 안 인라인으로 작성

src/App.js

import "./App.css";

function App() {
  return (
    <div className="App">
      <h1 style={{ color: "tomato", backgroundColor: "#f0f0f0" }}>Welcome</h1>
    </div>
  );
}

export default App;

 

특별한 경우가 아닐경우 이 방법으로 작성하지 않음

주의할 점 : 카멜케이스로 작성하기

 

2. src/index.css src/App.css에 작성

 

index.css에는 프로젝트 전체에 영향을 미치는 스타일을 지정할 때 쓰이고

App.css는 App에 영향을 미치는 스타일을 지정할 때 사용된다.

 

그런데 문제점이 있다.

 

src/component/Hello.js

import "./Hello.css";

export default function Hello() {
  return <div className="box">Hello</div>;
}

 

src/component/Hello.css

.box {
	width: 200px;
	height: 50px;
	background-color: greenyellow;
}

 

src/App.js

import "./App.css";
import Hello from "./component/Hello";

function App() {
  return (
    <div className="App">
      <Hello />
      <div className="box">App</div>
    </div>
  );
}

export default App;

 

src/App.css

.box {
	width: 100px;
	height: 100px;
	background-color: tomato;
}

 

Hello.js와 App.js에 class가 box인 div를 각각 만들고 각각 따로 스타일을 주었다. 그 결과,

Hello.css의 스타일이 지정됨을 알 수 있다.

 

개발자도구로 살펴보니 <header>안에 style들이 명시가 되어 먼저 작성된 App.css의 스타일 값이 Hello.css의 값들로 덮어쓰기 되었다. 

 

3. App.module.css 작성

 

앞서 작성한 예제에서 Hello.module.css로 파일 명을 바꾸고

import styles from "./Hello.module.css";

export default function Hello() {
  return <div className={styles.box}>Hello</div>;
}

 

이렇게 import를 하면 

해시값이 생겨 고유해지므로 컴포넌트 단위로 스타일 속성을 줄 수 있다.

 

---

이벤트(Event)

1. 미리 함수를 만들어놓고 전달해주기

export default function Hello() {
  function showName() {
    console.log("Mike");
  }

  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
      <button>Show age</button>
    </div>
  );
}

 

카멜케이스로 작성해주어야 한다.

만약 onClick={showName()} 이렇게 작성하면 showName()의 반환값이 들어간다.

 

2. 인라인으로 함수 선언하기

export default function Hello() {
  return (
    <div>
      <h1>Hello</h1>
      <button
        onClick={() => {
          console.log(30);
        }}
      >
        Show age
      </button>
    </div>
  );
}

 

이 방법의 장점은 매개변수를 전달하기가 편하다는 것이다.

 

다른 예제 - 1

export default function Hello() {
  function showAge(age) {
    console.log(age);
  }

  return (
    <div>
      <h1>Hello</h1>
      <button
        onClick={() => {
          showAge(30);
        }}
      >
        Show age
      </button>
    </div>
  );
}

 

input text 예제 (함수선언 방식)

export default function Hello() {
  function showText(e) {
    console.log(e.target.value);
  }

  return (
    <div>
      <h1>Hello</h1>
      <input type="text" onChange={showText} />
    </div>
  );
}

 

input text 예제 (익명함수 방식)

export default function Hello() {
  return (
    <div>
      <h1>Hello</h1>
      <input
        type="text"
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
    </div>
  );
}

 

input text 예제 (매개변수로 넘기기)

export default function Hello() {
  function showText(txt) {
    console.log(txt);
  }

  return (
    <div>
      <h1>Hello</h1>
      <input
        type="text"
        onChange={(e) => {
          const txt = e.target.value;
          showText(txt);
        }}
      />
    </div>
  );
}

 

---

 

Reference

https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7- 

React js 강좌