20201002 TIL React2

Component

React에서 재사용 가능한 가장 작은 단위의 block을 컴포넌트라고 한다.
Component를 재사용하지 않고 리액트를 사용할 수 있기는 하지만, 불필요하게 계속해서 같은 작업을 반복하는 것을 줄여줄 수 있다.
property를 이용해 다른 data를 넘겨줌으로써 비슷하지만 다른 내용을 웹에 보여줄 수 있다.

Functional Component는 return으로, Class Component는 render(){ return } 으로 화면에 보여줄 jsx를 랜더시킨다.
return 이후에는 꼭 jsx만 와야하는 것은 아니다. 함수 등을 이용해 보여줄 jsx를 가공하거나 정리해줄 수 있다.

const App = () =>{
  return <div>Hello World!</div>
}

class App extends React.Component {
  render(){
    return <div>Hello World!</div>
  }
}

Component를 작성 할 때에는 최대한 한 종류의 컴포넌트로 통일시켜주는것이 좋다.
Functional Component는 Class Component에서 사용하는 useState를 사용하지 못 한다는 단점이 있었지만, Hook이 도입되면서 functional Component를 사용하는 비중이 더 올라가고 있다.
하지만 유지보수 등을 위해 Class Component에 대해서도 잘 알고 있는것이 중요하다.

Property

property는 부모 Component가 자녀 Component에게 내려주는 데이타이다.
Key:Value Pair의 Object 형태를 지니고 있다.
내려주는 방법은

<Component name="Susan" age=26/>

처럼 Component내부에 key-value를 작성해주면 된다.

자녀 Component에서 property를 받아오는 방법은

import React from 'react';

const ChildComponent = (props) =>{
  return (
    <div>
    	name: {props.name}
		age: {props.age}
    </div>
  )
}

와 같은 방식으로 작성할 수 있다.
property로 단순 데이터만 내려줄 수 있는 것이 아니라, Component와 jsx, function도 자녀 Component에게 내려줄 수 있다.

<ApprovalCard>
	<CommentDetail
		author="Smith"
		comment="Nice Blog post!"
		timeAgo="Today at 8:00PM"
		avatar={faker.image.avatar()}/>
</ApprovalCard>

State

State는 Class Component에서밖에 사용하지 못 하므로, functional Component에서는 사용하지 않도록 유의해야한다.

constructor(props){
  super(props);
  this.state = {};
}

와 같은 방식으로 state를 사용해줄 수 있고, state내부에 key-value 페어를 작성해주면 된다.
state를 수정하려면 무조건 "setState( )"를 사용해야만한다.