[React] 댓글 컴포넌트 제작 (Component & Props)

🖨️ Component

• 컴포넌트 기반의 구조라는 중요한 특징을 가지고 있음
• 모든 페이지가 컴포넌트로 구성되어 있으며 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성
• 컴포넌트를 끼워 맟춰서 새로운 컴포넌트를 개발

에어비엔비 홈페이지

• 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있음

리액트 함수의 입력과 출

• 자바스크립트의 함수와 비슷
• React 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴
• React 컴포넌트는 만들고자 하는 대로 props. 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어주는 것

🖨️ Props

• 리액트 컴포넌트의 입력
• Props는 prop 뒤에 복수형을 나타내는 s를 붙여서 props이 여러 개인 것을 의미
• prop은 property 줄여서 사용한 것    
• 리액트에서는 React 컴포넌트의 속성을 나타냄

위에 빨간색으로 표시되어 있는 부분은 여행할 지역을 나타내고 있으며 모두 모서리가 둥근 사각형 모양에 상단에는 그림이 배경으로 들어가 있고 하단에는 색깔로 된 배경과 글자가 들어가 있는 형태이지만 안에 들어 있는 그림과 색상, 글자, 거리 등은 다

• 같은 React 컴포넌트에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트의 속 재료
• 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체
• 컴포넌트에 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를 화면에 렌더링하고 싶을 때 해당 데이터를 프랍스에 넣어서 전달하는 방식을 사용함

🖨️ Props 특징

• Read-Only
  • 읽기 전용
  • 값을 변경할 수 없음
  • 값을 변경하기 위해서는 새로운 값을 컴포넌트에 전달하여 새로운 엘리먼트를 생성

🖨️ JavaScript 함수의 속성

// pure
function sum(a, b) {
	return a + b;
}

// impure
function withdraw(accout, amount) {
	account.total -= amount;
}

•  pure
  • 함수가 순수
  • 입력 값을 변경하지 않으며, 같은 입력 값에 대해서는 항상 같은 출력값을 리턴
• impure
  
  • 입력으로 받은 파라미터 account의 값을 변경
  • 함수가 순수하지 않
•  모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수 같은 역할을 해야 함
•  모든 리액트 컴포넌트는 Props를 직접 변경할 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줄 것

🖨️ Props 사용법

function App(props){
	return (
    	<profile
        	name="도희"
            introduction="안녕하세요, 도희입니다"
            ViewCount={1500}
        />
    );
}

• name과 introduction에 들어간 문자열은 중괄호를 사용하지 않았고 viewCount에 들어간 정수는 중괄호를 사용함 
• JSX에 대해서 배울 때 중괄호를 사용하면 무조건 JavaScript 코드가 들어간다고 배웠음
• JSX를 사용하는 경우에는 키와 값으로 이루어진 키값상의 형태로 컴포넌트에 Props를 넣을 수 있음
• 각 속성에 값을 넣을 때 중괄호를 사용한 것과 사용하지 않은 것의 차이
• Props에 값을 넣을 때에도 문자열 이외에 정수, 변수 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 함
• 문자열도 중괄호로 감싸도 상관없음
• 이렇게 하면 이 속성의 값들이 모두 프로필 컴포넌트의 props로 전달되며 props는 이와 같은 자바스크립트 객체가 됨

{
	name: "도희",
    introduction: "안녕하세요, 도희입니다."
    viewCount: 1500
}

• props의 중괄호를 사용해서 다음과 같이 props의 값으로 컴포넌트도 넣을 수 있음

function App(props){
	return (
    	<Layout
        	width={2560}
          	height={1440}
            header={
            	<Header title="도희의 블로그입니다"/>
            }
            footer={
            	<Footer />
            }
       />
    );
}

• 레이아웃 컴포넌트의 props로는 정수 값을 가진 width, height과 react 엘리먼트로 header, footer가 들어오게 됨
• JSX를 사용하는 경우에는 간단하게 컴포넌트에 props를 넣을 수 있음

---

컴포넌트 분리

🖨️ Function Component

function Welcome(props) {
	return <h1>안녕, {props.name}</h1>;
}

• 하나의 Props 객체를 받아서 React 엘리먼트를 리턴
• 간단한 코드를 장점으로 가짐

🖨️ Class Component

class Welcome extends React.Component {
	render() {
    	return <h1>안녕, {this.props.name}</h1>
    }
}

• JavaScript ES6의 Class라는 것을 사용해서 만들어진 형태의 컴포넌트
• React의 모든 클래스 컴포넌트는 React.Component를 상속받아 만든다는 것
• React.Component라는 클래스를 상속받아서 Welcome이라는 클래스를 만들었으며 결과적으로 React 컴포넌트가 되는 것

🖨️ Component 이름

// HTML div 태그로 인식
const element = <div />

// Welcome이라는 리액트 Component로 인식
const element = <Welcome name="인제" />

• 컴포넌트의 이름은 항상 대문자로 시작해야 함
• React는 소문자로 시작하는 컴포넌트를 DOM태그로 인식
• div나 span과 같이 사용하는 것은 내장 컴포넌트라는 것을 뜻하며 div나 span과 같은 문자열 형태로 react.createElement에 전달
• 대문자로 시작하는 FOO와 같이 대문자로 시작하는 경우에는 React.createElement foo 형태로 컴파일되며 JavaScript 파일 내에서 정의했거나 임포트한 컴포넌트를 가리킴

🖨️ Component 렌더링

// DOM 태그를 사용한 element
const element = <div />;

// 사용자가 정의한 Component를 사용한 element
const element = <Welcome name="인제" />;

function Welcome(props) {
	return <h1>안녕, {props.name}</h1>;
}

const element = <Welcome name="인제" />;
ReactDOM.render(
	element,
    document.getElementById('root')
);

• 리액트는 welcome 컴포넌트에 name 인재라는 props를 넣어서 호출하고 그 결과로 리액트 엘리먼트 생성
• 엘리먼트는 최종적으로 리액트 돔을 통해 실제 돔에 효과적으로 업데이트 되고 브라우저를 통해 볼 수 있게 됨

🖨️ Component 합성

• 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트로 만드는 것
• 복잡한 화면을 여러 개의 Component로 나눠서 구현 가능
• 여러 개의 컴포넌트를 합쳐서 또 다른 컴포넌트를 만드는 것을 컴포넌트 합성이라고 함
• 웹 컴포넌트를 루트로 해서 하위 컴포넌트들이 존재하는 형태가 리액트로만 구성된 앱의 기본적인 구조
• 기존에 있던 웹페이지에 리액트를 연동한다면 루트 노드가 하나가 아닐 수 있기 때문에 기본적인 구조가 나타나지 않을 수 있음

🖨️ Component 추출

• 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수 있음
• 큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만든다는 뜻
• 컴포넌트의 추출을 잘 활용하게 되면 컴포넌트의 재사용성이 증가
• 컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고 프랍스도 단순해지기 때문에 다른 곳에서 사용할 수 있는 확률이 높아지기 때문임
• 재 사용성이 올라감으로써 동시에 개발 속도도 향상
• 컴포넌트를 어느 정도 수준까지 추출하는 것이 좋을지에 대해 정해진 기준은 없음
• 기능 단위로 구분하는 것이 좋고 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋음
• 재사용이 가능한 컴포넌트를 많이 갖고 있을수록 개발 속도가 빨라짐

🖨️ 댓글 컴포넌트 만들기

• 작성자 이름과 댓글 내용을 동적으로 변경할 수 있게 하기 위해 props를 추가
• 작성자 이름과 댓글 내용이 코드 상에 박혀 있기 때문에 동적으로 내용을 변경할 수 없음
• 작성자 이르과 댓글 내용을 props.name과 props.comment 값을 사용하도록 변경
•  props를 사용하도록 comment 컴포넌트를 변경하면 이 화면과 같이 아무런 내용도 나오지 않음
• name과 comment의 값이 정의되지 않아서 undefined이라 아무것도 나오지 않음
• comment list 컴포넌트에서 화면에 표시된 부분처럼 props를 추가
• 수정하면 커멘트 컴포넌트의 프랍스로 우리가 입력한 네임과 커멘트 값이 전달되기 때문에 내용이 정상적으로 표시
• 댓글 데이터를 별도의 객체로 분리해서 동적으로 받아온 데이터를 표시할 수 있는 구조로 변경 
• JavaScript 배열의 map 함수를 써서 각 댓글 객체에 대해서 comment 컴포넌트를 return하도록 코드를 작성

 

공부한 자료

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A% B8/dashboard

[지금 무료] 처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런