[리액트 기초반] 2주차 - 컴포넌트

10353 단어 React 스파르타코딩클럽 리액트 기초반 컴포넌트 React

1.컴포넌트(Component)

웹페이지의 구성단위를 말한다. <html> 요소들의 개별적인 블록이라고 생각하면 이해하기 쉽다. 웹페이지는 컴포넌트를 갖고 컴포넌트 또한 더 작은 단위의 컴포넌트를 갖는다. 컴포넌트를 골고루 잘 쪼개고, 개별 컴포넌트의 요소를 잘 만드는 것이 중요하다.

이 페이지는 <header>, <container>, <footer> 3개의 컴포넌트로 이루어져 있다. <container>는 다시 <image>와 <contents> 2개의 컴포넌트로 나뉜다.

2.State와 Props

state

컴포넌트에서 사용하는 데이터로, 컴포넌트 자신의 데이터이기 때문에 수정과 생성이 자유롭다. <header>의 전체보기, 스파르타 이야기, 항해99...등과 같은 텍스트 데이터가 state에 해당된다.

props

부모로부터 받아온 데이터. 컴포넌트 ∋ 컴포넌트 구조를 갖는 <container>는 <image>와 <contents>에게 각각의 데이터를 전달한다. 이때 하위 컴포넌트의 입장에서 상위 컴포넌트로부터 받은 데이터가 props가 되는 것이다. 하위 컴포넌트는 props를 수정할 수 없다. props에 대한 권한은 오직 데이터를 부여한 상위 컴포넌트에게 있다.

3.리액트 선언 방식

클래스형 컴포넌트

먼저 나온 컴포넌트로 지금은 잘 사용하지 않는다. 컴포넌트의 생애주기를 일목요연하게 보여주기 때문에 이후에 등장한 함수형 컴포넌트의 구조를 이해하기 위해서라도 아는 것이 좋다. 또한 클래스형 컴포넌트를 사용하는 프로젝트의 유지보수를 위해서라도 알아둘 필요가 있다. 라이프사이클 함수는 클래스형 컴포넌트에서만 사용한다.

함수형 컴포넌트

후에 나온 컴포넌트로 리액트에서 공식적으로 사용을 권장하고 있다. 함수형 컴포넌트에서 사용되는 React Hooks가 라이프 사이클 함수를 대체한다.

3-Ⅰ.함수형 컴포넌트

BucketList.js

import React from "react";

*함수 선언식
function Bucketlist(props){
   return (
       <div>버킷 리스트</div>
   );
}

*화살표 함수
const BucketList = (props) => {

  return (
      <div>버킷리스트</div>
  );

}

(택1)
❶ export {BucketList};
❷ export default BucketList;

함수와 export는 두 가지 방식으로 표기할 수 있다.
❶ 방식으로 표기할 때엔 자바스크립트 변수는 {중괄호}로 표기한다.

App.js

import logo from './logo.svg';
import './App.css';
(택1)
import {BucketList} from './BucketList';
import BucketList from './BucketList';

function App() {
  return (
    <div className="App">
      <BucketList/>
    </div>
  );
}

export default App;

App.js에서 컴포넌트를 import 할 때도 export와 마찬가지로 두 가지 방식으로 표기할 수 있다.

3-Ⅱ.클래스형 컴포넌트

위에서 적은 함수형 컴포넌트를 클래스형 컴포넌트로 바꿔보자.
App.js를 클래스형으로 바꾼 뒤 BucketList 컴포넌트에 데이터를 넘긴다.

App.js

import React from "react"; *리액트 패키지 가져오기
import BucketList from './BucketList';

class App extends React.Component{
constructor(props){
  super(props);

  this.state = {
    list: ["DUNE 관람", "편집", "2차 접종"],
  }
}

render() {
//console.log(this.state.list);
  return (
    <div className="App">
      <BucketList list_App = {this.state.list}/>
    </div>
  );
 }
}

export default App;

초기화 후 this.state.list를 BucketList에 넘겨주었다(render)
이때 <BucketList list_App = {this.state.list}/>에서 list_App은 props 이름이 되고 {this.state.list}는 데이터가 된다.

componentDid-Mount는 생성에 있어서 필수적인 과정은 아니다. 그러나 render는 반드시 거쳐야 한다. return 되어야 하는 값은 반드시 하나 이상 있어야 하는 js의 규칙 때문이다.(설령 그게 null;일지라도)

BucketList.js

import React from "react";

const BucketList = (props) => {
    console.log(props);
    return (
        <div>버킷리스트</div>
    );
}

export default BucketList;

(props)는 App.js의 <BucketList list_App = {this.state.list/>를 받아온다.

콘솔창에서 확인하면 <BucketList list_App = {this.state.list/>가 찍혀있는 것을 확인할 수 있다.

💡 알쓸신팁

코딩 컨벤션(Coding Convention)
코드 스타일 규약. 일관된 코드 스타일을 유지함으로써 코드의 가독성을 증진시키고 협업시 효율적인 업무 처리가 가능하다.

경로
./ 현재 위치
../ 이전 폴더
../../ 전전 폴더

import에서 from 다음에 오는 경로를 설정할 때 '.js'는 생략한다.

💡 Quiz - 무엇을 놓쳤나

Ⅰ. 제목 입력하기

오답

const BucketList = ({list}) => {
  <h2>개봉예정작</h2>

정답

render() {
  return (
    <div className="App">
      <h2>개봉예정작</h2>
      <BucketList list = {this.state.list}/>
    </div>
  );
}

나는 제목을 BucketList.js에 직접 입력했다. BucketList.js에서 App.js의 props를 받아오고 있으므로 최종적인 데이터는 BucketList.js에 입력해야 된다고 생각한 것이다. 그러나 데이터를 주는 쪽은 App.js이므로 제목 역시 App.js에서 적어야 한다.

Ⅱ. css 불러오기

오답

<div style = "float:center;">

정답

import "./App.css";

가운데 정렬을 해야 하기 때문에 App.js에 import "./App.css";로 css 파일을 import 해야 하는데, 나는 <div style = "float:center;">로 js파일에서 style을 직접 적용했다. 일단 이렇게 하면 적용이 되지 않는다. js파일에 직접 style을 적용할 수도 있지만, 코드가 늘어나므로 바람직한 방법은 아니다.

Ⅲ. 데이터 받아오기

정답①

const BucketList = (props) => {
	const my_lists = props.list;
  	.
  	.
  	.
  	}

오답이 없는 이유는...아예 못적었기 때문에....^-^....
const BucketList = (props)까지는 알겠는데 const my_lists에서 props를 어떻게 받아와야 할 지 몰랐다. 이 경우 받아와야 할 데이터는 props 중 list만 해당되므로 props.list;로 받아주면 된다. props로 받아올 경우, 배열에 해당되지 않는 데이터를 포함하고 있기 때문에 map이 적용되지 않는다.

정답②

const BucketList = ({list}) => {
	const my_lists = list;
	.
	.
	.
	}

이건 수업 때 배우지 않은 내용인데 이와 같은 방식을 사용하면 ①보다 깔끔한 코드를 작성할 수 있다.
파라미터 안에는 딕셔너리인 {list}를 받는데, 이때 {list}는 key이고 value는 App.js에서 list로 보낸 {this.state.list}가 해당된다.

Author And Source

이 문제에 관하여([리액트 기초반] 2주차 - 컴포넌트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cinephile/리액트-기초반-2주차-컴포넌트

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Python. 모듈과 패키지 찾는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다