컴포넌트

코딩에서 자주 강조하던 코드의 유지보수, 그리고 재사용성을 위한 리액트의 가장 기본
UI를 이루는 한 단위의 그룹들이라고 생각할 수 있음.
기존 class나 function들로 하는 것과 유사함.

리액트 컴포넌트는 딱 함수만 나눈다기보다는 보여지는 기능들을 단위로 쪼갰다고 생각하면 된다.
컴포넌트로 하는것은 개발자가 원하는데로 할 수 있는 것이며 보여지는 화면에 따라서나 기능에 따라 나누면 된다.

import React, { Component } from 'react';
import "./MainPageApp.scss";
import Nav from "./Nav/Nav";
import MainPageContents from "./MainPageContents/MainPageContents";

class MainPageApp extends Component {
  constructor () {
    super();
  }
  
  render() {
    return (
      <div className="MainPage">
        <Nav />
        <MainPageContents />
      </div>
    )
  }  
}

export default MainPageApp;

class 구조이다.

class 선언을 하고 (대문자) 상속(extends) 해오는 것이 보인다.

Component.. Component를 사용하게 해주는 "react"에 정의된 내재 함수(또는 클래스)일테다.

클래스 구조이니 생성자를 선언할 수 있다. 생성자이고 부모로부터 받아온다는 super()를 선언해주고

이제 리액트 클래스의 내재 메서드인 render()를 해준다.

render()는 리액트에서 보여지는 곳을 랜더링 해주는 메서드다.

render() {
    // index부분은 현재 임시용 이다 //
    const commentList = this.state.commentAll.map((comment, index) => <p key={index}>{comment}</p>)   

    return (
      <article>     
        <div className="article-title">
          <img src={require('../../../images/pjs.jpg')} alt="artcile_title_profile"/>

render메서드는 return이 필수이다. return이 결과로 보여지는 코드라는 것이다.

render안에서 처음 필요한 코드가 있으면 작성하고 return으로 보여지는 것들을 작성한다.

알고 있을 점은

render() {
    const commentList = this.state.commentAll.map()  

    return (                                                      

render안에서 javascript처럼 사용되는 변수선언같은 것이 된다.

class MainPageApp extends Component {
  constructor () {
    super();
  }
    
const commentList = this.state.commentAll.map() //오류
commentList = this.state.commentAll.map() //변수에 스코프 없이 선언
  
  render() {      

render밖 class 안에서는 javascript처럼 사용되는 변수선언같은 것이 아니라 스코프 없이 선언이 된다.

아니면 아에 class밖에다가 전역으로 사용하게 선언해야 된다.

또한 선언한 컴포넌트는 다른 곳에서 사용할 수 있게

export default MainPageApp;

이런식으로 export를 해줘야 컴포넌트를 사용할 곳에서 import를 한다.