[백엔드 개발자의 프론트 도전기] 3. 구현하기

컴포넌트의 존재도 알았고, html과 css로 만든다는 것도 알겠는데, 그래서 구현은 어디에 어떻게 하는건데?

 

계속 글을 읽어보면서, 이게 가장 큰 의문이었다.

실행을 위해 설정을 하고 앱 자체를 만드는 과정은 https://jyejye311.tistory.com/101에 정리해 두었다.

그 이후, 실제 어디 파일과 함수에서 구현해야 하는지 몰라 헤맸던 (강의나 책이 없는) 나같은 사람을 위해 정리해둔다.

 

굉장히 바보같은 질문이라고 생각할수도 있겠지만, 처음 공부를 시작하고 가장 막막했던 부분이다.

~~라는 html을 써넣으면 ~~하게 바뀝니다~~이런 내용이 대부분인데

그래서 그걸 어디에 써넣어야 하는가!

고민을 굉장히 많이 하면서 이곳저곳 넣어보다 여러 블로그를 전전하며 알게 되었다.

 

우선, index.js 파일에서 App을 호출하게 되고,

App.js 파일이 실행되어 화면구성이 나타난다.

따라서, html은 App.js 파일의 App() 함수에 들어가야 한다.

출력한 내용은 return() 안에 포함되어야 한다.

예를 들어, 다음과 같다.

import './App.css';

function App() {
  const myelement = <h1>I love jsx!</h1>;

  return (
    // html이 들어감
    <div className="App">
      <h1>Hello World</h1>
      {myelement}
    </div>
  );
}

export default App;

위의 그림에서 보는 것처럼,

<h1>Hello World</h1>처럼 html을 직접 써도 되고,

jsx를 사용해 const 변수(여기선 myelement)에 넣어둔 뒤 {변수}이렇게 사용할 수도 있다.

 

이 결과는 다음과 같다.

두 방식의 결과가 동일하게 나타남을 확인하였다.