[REACT_MEMO] 파워노트6

# Components and Props의 정의(아주중요)

 

 

+ Components?

- 리액트는 컴포넌트기반

- 리액트는 모든 페이지가 Component-Based이다.

- 작은 컴포넌트들이 모여서 큰 컴포넌트를 구성하고 이것이 페이지를 구성한다.

- 자바스크립트의 함수와 의미가 비슷

Ex) 리액트 컴포넌트를 하나의 함수로 생각하면 쉽다.

입력 ---  Javascript function ---> 출력

입력 ---   React component  ---> 출력

.

.

Props --- React component ---> React element

리액트 컴포넌트에서의 입력은 'Props(속성)'가 되고 출력은 'Element'가 된다.

즉 리액트 컴포넌트가 해주는 역할은, 어떠한 속성을 입력으로 받아서 그에 맞는 엘리먼트를 리턴하는 것

리액트 엘리먼트 = 가장 작은 블록 요소

 

 

 

+ Props?

- Property의 약자 의미는 리액트에서는 '속성'에 가까움

- 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

- 입력을 담당한다.

- Component의 속성을 의미한다.

 

https://alo-alex.tistory.com/56

[REACT_MEMO] 파워노트5

 

컴포넌트 = 붕어빵 틀 /  Element = 붕어빵을 참고하자

Props는 붕어빵 안에 속성이라고 생각하면 된다.

붕어빵에 팥(Props)이 들어갈 수도 있고 고구마가 들어갈 수도 있듯이.!

 

 

# Props의 특징

- Read-only 읽기 전용. 즉 값을 변경할 수 없다는 뜻

- 이 값들이 엘리먼트를 생성하고 있을 때 바뀌어 버리면 제대로 생성할 수 없음

- 붕어빵 다 구웠는데, 속재료를 바꿀 수 없는 것처럼..

- 다른 Props의 값으로 엘리먼트를 생성하려면, 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를 생성한다,

 

javascript의 속성(React 컴포넌트의 정의와 관련 있음.)

// Pure

 function sum(a,b){

      return a+b;

 }

입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴

 

 // Impure

 function withdraw(account, amount){

      account.total -= amount;

 }

입력값(input)을 변경

 

All React components must act like pure functions with respect to their props

모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수 같은 역할을 해야 한다. 

----> 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줄 것!

 

 

pure함수는 같은 입력 값에 대해서는 항상 같은 결과를 보여줘야 하기 때문에,

React 컴포넌트 관점에서 같은 props에 대해서 항상 같은 결과(React 엘리먼트)를 보여줘야 한다는 의미로 볼 수 있다.

----> 리액트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 한다.

 

 

# Props 사용법

 // JSX

 function App(props){

      return(

           <Profile 

                name="alo"

                introduction="hello, my name is alo"

                viewCount={1500}

 

           />

      );

 }

 

속성에 중괄호가 들어가면 자바스크립트나 정수, 변수, 컴포넌트가 들어온다고 생각하면 됨. 물론 텍스트가 들어올 수도 있음

예시에 작성된 속성의 값들이 모두 Profile컴포넌트의 props로 전달되며, props는 자바스크랩트 객체가 된다.

 {

      name:'alo',

      introduction:'hello, my name is alo',

      viewCount:1500

 }

 

 

 // JSX

 function App(props){

      return(

           <Layout

                width={2500},

                height={1440},

                Header={

                     <Header title="this is header"/>

                }

                footer={

                      <Footer/>

                 }

           />

      );

 }

 

 

JSX를 사용하지 않을경우 createElement를 이용해서 만들어 준다.

하지만 이는 참고로만 알고 있자.

 // No JSX

 React.createElement(

      Profile,

           {

                name:'alo',

                introduction="hello, my name is alo",

                viewCount={1500}

           },

      null

 );

 

 

 

# Componenent 만들기

리액트에서의 컴포넌트틑 크게 2가지로 나뉜다.

- Class Component >> 리액트의 초기 버전에서는 주로 사용

- Funtion Component >> 이후에는 함수컴포넌트를 개선해서 주로 사용 중 >>> 함수컴포넌트를 개선해서 사용하는 것이 HOOK(훅)

                                      >>> ! 현재 리액트 개발에서는 주로 훅을 사용한다.

 

 

 

# Component의 종류

 // 함수형 컴포넌트

 function Welcome(props){

     return <h1>Hi, {props.name}</h1>

 }

 

 // 클래스형 컴포넌트

 function Welcome extends React.Component{ // React.Component를 상속받아서 Welcome이라는 컴포넌트를 생성

     render(){

           return <h1>Hi, {this.props.name}</h1>

     }

 }

 

 

 

# Component의 이름

- [중요] 컴포넌트의 이름은 항상 대문자로 시작해야 한다.

   대문자로 작성해야지 'React.createComponent'로 인식하고 생성한다.

- 리액트는 소문자로 시작하는 이름은 Dom tag로 인식하기 때문

 // HTML div 태그로 인식

 const element = <div />; // 소문자로 생성하면 에러가 나니 주의!

 // Welcome이라는 리액트 Component로 인식

 const element = <Welcome name="이름이.." />; 

 

// 만약 소문자로 작성하고 싶다면 먼저 대문자로 시작하는 변수에 할당한 뒤 이 변수를 사용하면됨. 권장하지는 않는다.

 

 

# Component 랜더링

 // DOM 태그를 사용한 element

 const element = <div />;

 // 사용자가 정의한 Component를 사용한 element

 const element = <Welcome name="이름이.." />;

 

 

 function Welcome(props){                                      // Welcome이라는 함수컴포넌트를 선언함

      return <h1>Hi, {props.name}</h1>

 }

 const element = <Welcome name="이름이.." />; // Welcome name="이름이.." 라는 엘리먼트를 파라미터로 해서

 ReactDOM.render(                                                  // ReactDOM.render함수를 호출한다.

      element,

      document.getElementById('root')

 )

                                                                       // 이렇게 하면 React는 Welcome컴포넌트에 name="이름이.." 라는 값을 넣어 호출하고

                                                                       // 그 결과로 돔에 적용되고 브라우저를 통해서 볼 수 있다.    

  

 

 

# Component 합성

여러개의 컴포넌트를 합성하여 만드는 건

리액트는 컴포넌트 안에 컴포넌트를 넣을 수 있다.

이를 컴포넌트의 합성이라고 한다.

 function App(props){

      return(

      <div>

           <Welcome name="Miles"/> 

           <Welcome name="Jin"/>

           <Welcome name="rozy"/>

      </div>

      );

 }

 ReactDOM.render(

      <App />

      document.getElementById('root')

 );

 

 

 

# Component 추출

복잡한 컴포넌트 내에서 추출하는 것

큰 컴포넌트를 조각내서 가져오는 것.

컴포넌트 추출을 잘하게 되면 재사용성이 높아진다.

컴포넌트의 크기가 작아질수록 명확해지고, props도 단순해지기 때문에 다른 곳에서 사용할 수 있는 확률이 높아지는 것.

더불어 개발 속도도 올라간다.(즉 재사용 가능한 컴포넌트를 많이 갖고 있을수록 개발 속도가 빨라진다.)

컴포넌트는 기능 단위로 추출하는 것이 좋다

 // 0. Component 추출 전

 function Comment(props){

      return(

           <div className='comment'>

                <div className='user-info'>           

                     <img className='avatar' src={props.author.avatarUrl} alt={props.author.name}/> // 이부분 추출해 보기

                     <div className='user-info-name'>{props.author.name}</div>

                </div>

                <div className='comment-text'>{props.text}</div>

                <div className='comment-date'>{formatDate(props.date)}</div>

           </div>

      );

 }

 

 

 props={

      author:{

           name:'바나나 우유',

           avatarUrl:'https://...'

      },

      text:'댓글입니다.',

      date: Date.now(),

 }

 

 

 // 1. Avatar 추출

 function Avatar(props){

      return(

           <img className='avatar'

                 src={props.user.avatarUrl} // author 를 user로 바꿈

                 alt={props.user.name} // 보편적인 단어를 사용하는것은 재사용성 측면을 고려하는것

           />

      );

 }

 

 

 // 2. UserInfo 추출

 function UserInfo(props){

      return(

           <div className='user-info'>

                <Avatar user={props.user}/>

                <div className='user-info-name'>

                       {props.author.name}

                </div>

           </div>

      );

 }

 

 

 // 3. Component 추출 후

 function Comment(props){

      return(

           <div className='comment'>

                <UserInfo user={props.author}/>

 

                <div className='comment-text'>{props.text}</div>

                <div className='comment-date'>{formatDate(props.date)}</div>

           </div>

      );

 }

 

 

 

# 댓글 컴포넌트 만들기

 

1.컴포넌트를 만들어줄 폴더를 생성해준다. 'chapter_05'

 

 

 

2. 댓글 내용에 들어갈 컴포넌트를 만들어준다.(Comment.jsx)

스타일을 적용해야하니, 스타일을 상단에 작성해 주고 적용한다.

 

 

 

3. 댓글 리스트 컴포넌트를 만들어준다.(CommentList.jsx)

 

 

 

4. index.js로 돌아와 만들어준 컴포넌트들을 불러온다

 

 

 

5. 터미널을 열어 'npm start'를 한 뒤 확인해준다.

짜라란 잘되니까 좋당