React] Component & JSX

Component

화면 개발을 진행할 때, 전체 페이지를 한 번에 그리게 되면, 하나의 소스파일에 많은 양의 코드가 작성되게 됩니다.

이를 방지하기 위해 UI를 재사용할 수 있도록 소스를 여러 조각으로 나눠서 작성하여 가져다 쓰게 되는데 이를 Component(컴포넌트)라고 합니다.

 

Component를 나누는 범위는 상황에 따라 다르며, 버튼하나까지도 나눠서 사용할 수 도 있습니다.

개발자의 능력이라고 보시면 됩니다.

이렇게 나눈 여러 개의 Component를 모아 한 개의 페이지로 만들게 됩니다.

 

React에서 제공하는 Component 방식이Class Component와 Function Component 2가지 방식이 있지만,

주로 Function Component를 사용하며, Class Component방식을 사용한다면 아마 기간이 좀 된 코드이지 않을까 생각 듭니다.

 

주의사항

• 함수의 이름은 대문자로 시작
• 속성명은 camelCase를 사용
• JS에서 사용되는 this를 사용하지 않음

 

 

---

 

 

예

간단하게 2개의 컴포넌트를 사용해서 1개의 페이지를 만들어봤습니다.

출력화면

import Title from "../component/title";
import Content from "../component/content";

function HelloWorld() {
  return (
    <>
      <Title language="kor"></Title>
      <Content></Content>
    </>
  );
}

export default HelloWorld;

// title.jsx

function Title(props) {
  const hello = "안녕하세요";

  return (
    <h2>
      {props.language}: {hello}
    </h2>
  );
}

export default Title;

// content.jsx

function Content() {
  return <p>반갑습니다. Front-End Developer 왕가 입니다.</p>;
}

export default Content;

 

 

---

 

 

JSX

React에서 사용되는 문법으로 HTML처럼 생겼으나 JS입니다.

Component에서 XML형태로 코드를 작성하면 babel이 JSX → JS로 변환해 주게 됩니다.

babel은 JS의 컴파일러라고 할 수 있습니다.
React에서 사용되는 JSX문법을 JS문법으로 변환해주게 되며,
CRA(create-react-app)로 프로젝트 생성 시, babel, webpack 등 기본적으로 같이 설치가 됩니다.

 

 

---

 

 

예

다음 코드는 CRA(create-react-app)로 생성된 App.js 파일입니다.

아래와 같이 HTML과 같이 태그 형식으로 생겼으며, return에는 반드시 하나의 태그로 감싸주어야 합니다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

에러 및 개선

// return에 div태그를 2개 사용했기 때문에 에러 발생
function App() {
  return (
    <div className="App">
      테스트
    </div>
    <div>
      테스트
    </div>
  );
}

// 아래와 같이 div태그를 추가하거나 Fragment태그(빈태그)를 추가
return (
  <div>
    <div className="App">
      테스트
    </div>
    <div>
      테스트
    </div>
  </div>
);
// 또는
return (
  <Fragment> {/* <> JSX안에서의 주석처리 */}
    <div className="App">
      테스트
    </div>
    <div>
      테스트
    </div>
  </Fragment> // </>
);

 

 

---

 

 

변수사용하기

JSX에서 return 해줄 때, 선언된 변수를 사용하고 싶을 경우에는 {변수} 중괄호를 사용하면 된다.

(`hello`라는 변수 사용)

import logo from './logo.svg';
import './App.css';

function App() {
  const hello = "안녕하세요.";
  return (
    <div className="App">
      <p>
        Edit <code>src/App.js</code> and save to reload.
        {hello}
      </p>
    </div>
  );
}

export default App;

 

 

---

 

 

조건문

return문 안에서는 if문이 아닌 삼항연산자 또는 보호연산자를 사용하는 것을 권장합니다.

return (
  <div>
    <img src="주소" className={condition ? 'imageHighlight' : 'image'} />
    {condition && <button onClick={onClickButton}>클릭</button>}
  </div>
);

 

 

---

 

 

CSS

태그에 css입력은 class가 아닌 className을 사용합니다. (class는 JS 약어이기 때문에 사용하면 안 됨)

className에 css파일에 선언된 name을 적용시켜도 되고, (label태그의 경우 for 대신 htmlFor 사용)

style을 변수에 담거나 inline스타일로 직접 넣어줘도 되나,

CSS파일에서 처럼 스타일 이름에 -(하이폰)을 사용하는 것이 아니라 카멜표기법으로 사용

(`appHeaderStyle`라는 변수 사용)

import logo from './logo.svg';
import './App.css';

function App() {
  const appHeaderStyle = {
    backgroundColor: "#282c34",
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 'calc(10px + 2vmin)',
    color: 'white',
  }
  
  return (
    <div className="App">
      <header className="App-header" style={appHeaderStyle}>
        <img src={logo} className="App-logo" alt="logo"
             style={{
               height: '40vmin',
               pointerEvents: 'none'
        }}/>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;