React 개발의 기본 -1

지난 게시글 까지 해서 리액트 프로젝트 생성까지는 완료하였습니다.

 

이제 필요 없는 부분을 지우고 저희가 원하는 페이지를 만드는 과정을 진행합니다.

 

지금부터 작성할 내용은 노마드 코더의 무료 강의인 ReactJS로 영화 웹 서비스 만들기를 참고하여 작성합니다.

 

 

 

 

우선 README.md 를 본인 스타일에 맞게 작성하세요!

 

기존에 들어가있는 내용을 모두 지우고 본인만의 스타일대로 만드시면 됩니다.

 

그리고 , src 폴더에는 index.js , App.js 를 제외한 파일을 모두 삭제합니다.

 

 

삭제 완료 후 src폴더

 

 

그리고 packge.json 에 scripts 부분에서  test , eject부분 두줄을 날려줍니다.

 

 

 

 

이렇게 만들어주고 나서

index.js 파일에도 갑니다.

 

 

 

 

위에서 보이는 부분중에 3,5, 14~17 라인을 지웁니다.

 

 

 

이렇게 만들어 준 후  App.js로 갑니다.

 

 

 

 

이 상태에서 하단의 소스 처럼 만들어줍니다.

 

 

 

리액트의 구조를 잠시 설명해드리겠습니다.

우선 index.html이라는 html 파일이 있고 , 그 파일에 보시면 

 

<div id="root"></div>

 

div태그의 id 가 root인 부분이 있습니다.

이제 리액트가 자체적으로 저 root라는 div태그에 자바스크립트와 html 코드를 삽입하여 랜더링하게됩니다.

 

index.js 라는 소스에서 보이듯이

 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 바로 이 부분이 랜더함수입니다. 

ReactDOM.render();

라는 함수가 랜더링 함수이고 뭘 랜더링 할지는 <App />이라는 html과 유사한 태그를 사용하게되고,

document.getElementById('root')

바로 root라는 id가 있는곳으로 삽입하여 랜더링한다 . 이런 개념으로 받아들이시면 될것같습니다.

 

그리고 저 <App/> 태그가 바로 App.js에 function App을 실행시키고, 

거기서 리턴받은 <div>   <h1>Hello World!! </h1> </div>라는 소스가 삽입되어, 웹페이지에는 

 

 

 

 

이렇게 h1태그로 작성된 Hello world!!가 웹페이지에 출력이되고 ,

 

 

 

 

소스검사를 해보면 , 이렇게 div id ="root"태그 속에 App에서 리턴해준 태그가 잘 삽입되어있는것을 볼 수 있습니다.

 

root라는 id를 따라가기때문에 index.html의 id를 변경할 경우 ,  랜더함수의 id또한 일치시켜야 해당 id의 태그 사이로 소스를 끼워넣을 수 있습니다.

 

리액트의 이런 각각의 구조들을 component라고합니다.

 

각각의 컴포넌트들이 동작하며 작동하는것이죠.

 

컴포넌트는 html을 반환하는 함수입니다!

 

그리고 컴포넌트를 사용하고자 할 땐, 상단에 import App from "./App"처럼 임포트해주고

꼭 App 이아닌 <App />형태로 사용하여야합니다.

html태그와 유사한 형태임으로 기억하고 사용하시면됩니다.

 

방금까지 다 지운 상태에서 , 새로운 컴포넌트를 만들고 사용해봄으로서 ,  테스트 해보겠습니다.

 

 

 

Mandoo.js 를 만들었습니다. 상하단엔 

import React from 'react';

 

export default Mandoo;

이런 구조여야합니다.

 

그리고 그 사이에

function Mandoo(){

    return(

        <h2>I like mandoo!</h2>

    );

}

이런 함수를 넣어서 h2 태그인 i like mandoo!를 리턴해주는것이죠 , 그러면 이것을 어디서 쓰느냐!

 

 

 

 

import Mandoo from './Mandoo';

이렇게 상단에 임포트해주고 원하는곳에 <Mandoo />라고 집어넣어주게되면, 

 

이렇게 웹페이지상에 출력이되고 , 소스 검사를 해보게되면, 

 

 

 

 

정상적으로 순서대로 소스가 삽입이 되는것을 볼 수 있습니다.

이제 컴포넌트에 대한 감이 잡히죠?

 

그리고 Mandoo.js 파일을 지우고 App.js에 몰아서 넣어보겠습니다.

 

 

이렇게 몰아 넣어도 정상적으로 방금 전과 같이 동작하는것을 알 수 있습니다.

 

어쨌든 컴포넌트를 이용하면 반복적인 소스를 다양하게 삽입할 수 있습니다.

 

이 성질을 이용해보죠.

 

 

위와같이 사용할 수 있습니다.

 

저렇게 사용하게되면 , name 이라는 props 를 전달하게되는데 , 매개변수처럼 {name}으로 받고 하단에서 {name}으로 사용할 수 있습니다.

저렇게 작성한 웹페이지를 하단에서 보시죠!

 

 

 

이렇게 여러가지 요소를 한번에 처리하기 쉬운 장점을 가졌다고 보면됩니다.

 

하지만 우린 여기서 한 단계를 더 나아가서 , 저 데이터들이 새롭게 실시간으로 날라온다고 가정해봅시다.

 

거기서 나오는 개념이 이제 , 배열과,  자바스크립트의 map개념입니다.