ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [스파르타코딩클럽] 리액트 React.js week 1-3
      SPARTA CODING CLUB 2021. 8. 9. 15:50

      JSX

      리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html)

       

      그럼 리액트에서 어떻게 뷰를 그릴까요?

      • JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

      HTML을 품은 JS === JSX!

      자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 할 수 있어요.

       

      JSX 규칙

      • 태그는 꼭 닫아주기
        // input 태그를 닫지 않고 넣어볼거예요!
function App() {
  return (
    <div className="App">
      <input type='text'>  <!-- 에러! -->
      <!-- <input type='text' /> 이렇게!-->
    </div>
  );
}​
      • 무조건 1개의 엘리먼트를 반환하기
        return (
    <p>안녕하세요! 리액트 반입니다 :)</p>  // 에러!

    <div className="App">
    <!-- <p>안녕하세요! 리액트 반입니다 :)</p> 여기로! -->
      <input type='text'/>
    </div>
  );​
      • JSX에서 javascript 값을 가져오려면 중괄호를 사용
            const cat_name = 'perl';
   
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello {cat_name}!
      </div>
    );​
         값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있습니다.
        <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
      • class 대신 className (id는 id ;)
      • 인라인 스타일 문법
        // 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}​

       

       

      Component

      리액트 = 레고, 컴포넌트 = 블록

      <!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <header> 
        ...
    </header>
    <div class="container">
        <div id="image-banner">
            ...
        </div>
        <div id="contents-1">
            ...
        </div>
    </div>
    <footer>
        ...
    </footer>
  </body>
</html>

      나누면,

      1. <header/>    컴포넌트
      2. <container/>    컴포넌트
        1. <imagebanner/>    컴포넌트
        2. <contents1/>    컴포넌트
      3. <footer/>    컴포넌트

      함수형

      // 리액트 패키지를 불러옵니다.
import React from 'react'; 

// 함수형 컴포넌트는 이렇게 쓸 수도 있고
// function Bucketlist(props){
//     return (
//         <div>버킷 리스트</div>
//     );
// }

// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.
// 저희는 앞으로 화살표 함수를 사용할거예요.
// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
const BucketList = (props) => {

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div>
            버킷 리스트
        </div>
    );
}

// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;

      클래스형

      import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {

  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어줍니다. */}
        <BucketList/>
      </div>
    );
  }
}

export default App;

      데이터를 넘겨줄 때

      State와 Props

      State

      • state는 Component가 가지고 있는 데이터입니다.
      • state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터입니다.
      • 생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄집니다. 내꺼니까 생성도 수정도 자유롭습니다.
      • 함수형 컴포넌트에는 state가 없습니다.

       

      Props

      • props는 Component가 부모 Component로부터 받아온 데이터입니다.
      • Props로 받은 데이터는 수정할 수 없습니다! 남의 것이니까요!
      • 데이터를 넘겨줄 때!
        • state 값 사용하기
          render() {
    console.log(this.state);
    ...
}​
        • 컴포넌트에 props를 넘겨줄 때
          // App.js
render() {
    // this 키워드를 통해 state에 접근할 수 있어요.
    console.log(this.state);

      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어줍니다. */}
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <BucketList list={this.state.list}/> //이렇게
      </div>
    );
  }​
  
  
// Other.js
  const BucketList = (props) => {
    
    console.log(props);

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div>
            버킷 리스트
        </div>
    );
}

      리액트 기본 뼈대에 대해!

      기본적인 데이터를 생성하고 넘겨주는 것을 배워보았습니다.

      연습만이 살길...;

      반응형

      'SPARTA CODING CLUB' 카테고리의 다른 글

      [스파르타코딩클럽] 리액트 React.js week 1-2  (0) 2021.08.04
      [스파르타코딩클럽] 리액트 React.js week 1-1  (0) 2021.08.03

      관련글 관련글 더보기

    © 2021 J.LOG

    티스토리툴바