dev
-
[10]State와 Props의 차이dev/Web 2021. 4. 12. 19:03
State와 Props 둘 다 컴포넌트에서 사용하거나, 렌더링 할 데이터를 담고 있으므로 비슷해 보일 수 있지만 매우 다르다. props는 부모 컴포넌트가 설정하고, state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 할 수 있다. props를 사용한다고 무조건 값이 고정적이지는 않다. 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고 자식 컴포넌트에서 특정 이벤트를 발생할 때 부모 컴포넌트의 메서드를 호출하면 props를 유동적으로 사용할 수 있다.
-
[8]React에서 state는 무엇인가?dev/Web 2021. 4. 12. 19:02
state는 React 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 종류는 두가지이다. 클래스형 컴포넌트가 지니고 있는 state 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state State를 선언하는 방법 class User extends React.Component { constructor(props) { super(props) this.state = { message: 'Welcome to React world' } } render() { return ( {this.state.message} ) } }
-
[7]Pure Component가 뭔가?dev/Web 2021. 4. 12. 19:00
React.PureComponent는 React.Component와 비슷하다. 하지만 PureComponent에서는 shouldComponentUpdate가 이미 구현되어 있는데, props와 state를 얕은 비교를 통해 비교한뒤 변경된 것이 있을 때만 리렌더링 한다. state로 인한 불필요한 렌더링을 방지하기 위해 사용된다. → 성능 향상 얕은 비교를 사용하기 때문에 props와 state의 구조가 간단하면 PureComponent를 사용할 수 있다. 깊은 자료 구조의 변화가 있다면 forceUpdate()를 사용한다.
-
[5]React Component를 생성하는 법dev/Web 2021. 4. 12. 18:59
클래스형 컴포넌트와 함수형 컴포넌트가 존재한다. 클래스형 컴포넌트는 JSX를 표현하기 위해 render() 란 함수에서 반환값으로 JSX를 반환해야한다. 클래스형 컴포넌트 class Greeting extends React.Component { render() { return {`Hello, ${this.props.message}`} } } 함수형 컴포넌트 function Greeting({ message }) { return {`Hello, ${message}`} }
-
[4]Element와 Component의 차이dev/Web 2021. 4. 12. 18:58
Element는 DOM 관점에서 우리가 화면에 나타내고 싶은 plain object이다. Element는 다른 Element를 그들의 Props로 포함할 수 있다. React에서 Element는 태그를 지정하는 객체이고, 한번 생성되면 다시는 변형되지 않는다(immutable). const element = React.createElement( 'div' {id: 'login-btn'}, 'Login' } React에서의 Component는 function or class이며 props로 입력을 받을 수 있고, Element를 반환하는 함수 혹은 클래스를 얘기한다.