React (2)

sunm309·2021년 6월 27일
0

Component (1)

Component

  • Component → 웹 사이트의 조각
    → 웹 사이트를 잘 조각낼 줄 아는 사람 === 리액트를 잘 쓰는 사람

State, Props

state

Component가 가지고 있는 데이터
한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터
생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄줘야 한다.
생성, 수정 자유롭다.

props

Component가 부모 Component로부터 받아온 데이터
props로 받은 데이터는 마음대로 생성하거나 수정할 수 없다.

리액트 코딩 룰

폴더는 소문자로 시작하는 카멜케이스를 사용!

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

Component (2)

함수형 Component (ReactStudy.js)

// ReactStudy.js
import React from 'react'; // 리액트 패키지 불러오기

// 함수형 컴포넌트 쓰는 방식 1
function ReactStudy(props) {
	return (
    	<div>리액트😎</div>
    );
}

// 함수형 컴포넌트 쓰는 방식 2
		// props → 부모 컴포넌트에게 받아온 데이터
const ReactStudy = (props) => { // 화살표 함수: =>
	
  	// 컴포넌트가 뿌려줄 ui 요소(리액트 엘리먼트라고 부른다)를 반환
	return (
    	   <div>
               리액트😎
           </div>
    	);
}
  
// 만든 함수형 컴포넌트 → export 해준다!
// export → 다른 컴포넌트에서 ReactStudy 컴포넌트를 쓸 수 있다!!
export default ReactStudy;

컴포넌트 불러오기 (App.js)

import React from 'react';
// ReactStudy 컴포넌트 import
import ReactStudy from './ReactStudy'; 
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];

function App() {
  return (
    <div>
      <h1>리액트😎</h1>
      {/* 컴포넌트를 넣어준다! */}
      <ReactStudy/>
    </div>
  );
}

export default App;

Component(3)

클래스형 Component

App.js를 클래스형으로 바꾸고, ReactStudy 컴포넌트에 데이터를 넘겨주기
// App.js
import React from 'react';
import ReactStudy from './ReactStudy';

// 클래스형 컴포넌트
class App extends React.Component { // App이라는 리액트 컴포넌트를 만든다.

  constructor(props){ // 생성자 함수
    super(props);
    
    // App 컴포넌트의 state를 정의해주기
    this.state = {
      list: ['산책하기', '낮잠자기', '공부하기'],
    };
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어준다
  render() {
      return (
      <div className="App">
        <h1>리액트😎</h1>
        {/* 컴포넌트를 넣어준다! */}
        <ReactStudy/>
      </div>
    );
  }
}

export default App;

Component에서 Component로 데이터를 넘겨주기

  • App 컴포넌트가 가지고 있는 state를 ReactStudy에 넘겨주기
    함수형 컴포넌트에는 state가 없다.

state 값 사용하기

render() {
   console.log(this.state);
}

→ list: ["산책하기", "낮잠자기", "공부하기"]

// App.js
render() {
    // this 키워드를 통해 state에 접근할 수 있다
    console.log(this.state);

      return (
      <div className="App">
        <h1>리액트😎</h1>
        {/* 컴포넌트를 넣어준다! */}
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <ReactStudy list={this.state.list}/>
      </div>
    );
  }
// ReactStudy.js
const ReactStudy = (props) => {
    
    console.log(props);

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환
    return (
        <div>
            리액트😎
        </div>
    );
}

0개의 댓글