리액트 Component

리액트는 레고 컴포넌트는 레고블록

컴포넌트에는 '클래스형'과 '함수형'이 있습니다

 

웹 사이트는, 크게 <header/>, <container/>, <footer/> 세 개의 컴포넌트가 있고,

<container/> 컴포넌트는, <imagebanner/>, <contents1/> 컴포넌트로 이루어져 있다

 

 

리액트 코딩룰

 

폴더는 소문자로 시작하는 카멜케이스를 사용 JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용

폴더나 파일 앞 글자는 대문자로 시작해야한다

버킷리스트 컴포넌트

// 리액트 패키지를 불러옵니다.
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;

App.js에서 컴포넌트 불러오기

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

function App() {

  return (
    <div className="App">
      <h1>내 버킷리스트</h1>
      {/* 컴포넌트를 넣어줍니다. */}
      <BucketList/>
    </div>
  );
}

export default App;

클래스형 컴퍼넌트

클래스형 컴퍼넌트와 state를 props로 app.js 컴포넌트에서 자식 컴포넌트로 정보를 옮기는 법

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() { // 렌더가 따로 있다
    console.log(this.state)
    
      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        {/* 컴포넌트를 넣어줍니다. */}
          <BucketList list={this.state.list} />
          {/* 버킷리스트 컴포넌트에 정보 넘겨주기 state를 props로 */}
      </div>
    );
  }
}
// 클래스 형 컴포넌트는 조금 더 세세하게 이 컴포넌트가 어떻게 할건지 나눠져 있음
export default App;

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

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

// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.
// 저희는 앞으로 화살표 함수를 사용할거예요.
// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
const BucketList = (props) => {
    console.log(props) // state를 props로 넘겨주기 부모 컴포넌트에서 받아온 정보
    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div>
            버킷 리스트
            
        </div>
    );
}

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

 

다음에 배울것..

state와 props

전부 컴포넌트의 데이터를 다룰 때 쓰인다.

 

state는 컴포넌트가 가지고 있는 데이터다.

 

props는 컴포넌트가 부모 컴포넌트로 부터 받아온 데이터(생성, 수정 마음대로 고칠 수 없다)