[React] forceUpdate(), PureComponent, shllow-equal, hook(useState, useEffect), map(), reactstrap

나는김혜린 2022. 2. 16. 19:35

forceUpdate()

constructor(props) {
    super(props);
    this.state = {
        StateString:'react',
    }
}

StateChange = () => {
    this.state.StateString="리액트";
    this.forceUpdate();
}

render() {
    return (
        <div style={{padding:"0px"}}>
            <button onClick={(e) => this.StateChange('direct', e)}>direct</button>
            {this.state.StateString}
        </div>
    )
}

-> this.state.StateString='리액트'와 같이 직접 state를 변경하면 render() 함수를 호출하지 않으므로 화면의 state 값은 바뀌기 전 상태로 남아있다.
이때 forceUpdate() 함수로 화면을 새로고침하면 render() 함수를 호출해 변경된 값을 화면에 보여준다.

PureComponent

: props와 state의 변경에 따라 render() 함수를 호출하는데, 비교 대상의 값을 비교해 동일하지 않으면 변경이 발생했다고 본다.

shallow-equal

npm i shallow-equal 로 shallow-equal을 설치해준다.

constructor(props) {
    super(props);
    this.state = {
        StateString:'react',
    }
}

shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqualArrays(this.state, nextState);
}

componentDidMount() {
    const obj = { react : '200'};
    const arr1 = ['리액트', obj];
    const arr2 = ['리액트', obj];
    const arr3 = ['리액트', {react:'200'}];

    console.log('shallowEqualArrays(arr1, arr2) : ' + shallowEqualArrays(arr1,arr2));
    console.log('shallowEqualArrays(arr2, arr3) : ' + shallowEqualArrays(arr2, arr3));

    this.setState({StateString : 'react'});
}

-> 배열 arr1과 arr2는 obj라는 같은 객체를 참조한다.
하지만 arr3의 {react:'200'}은 obj와 값은 같지만 다른 참조 값을 가지만 객체이다.
shouldComponentUpdate()에서 shallowEqualArrays() 함수로 값만 비교하기 때문에 false를 반환하고 render() 함수를 실행하지 않는다.

hook (useState, useEffect)

import React, {useState, useEffect} from 'react'

export default function Study(props) {
    const [contents, setContents] = useState('[THIS IS REACT]');

    useEffect(() => {
        console.log('useEffect');
    })

    return (
        <div>
            <h2>{contents}</h2>
            <button onClick={() => setContents('[THIS IS HOOK]')}>버튼</button>
        </div>
    )
}

useState()

: state 변숫값을 선언 및 할당한다.
이때 두 가지 인자가 선언된 배열이 반환되는데 첫 번째 인자는 state 변수명, 두 번째 인자는 state 변숫값을 변경해주는 함수이다.

useEffect()

: componentDidMount()와 같이 return되는 html 코드들이 화면에 그려진 이후에 실행된다.
-> 최초 페이지가 로딩될 때 한 번 실행되고 setContents() 함수로 state값이 변경되면 한 번 더 실행된다.

map()으로 element 반환하기

import React, { Component } from 'react'

class Study extends Component {
    render() {
        const elementArr = [
            <li>react</li>
            , <li>200</li>
            , <li>Array map</li>
        ]

        return (
            <ul>
                {elementArr.map((array_val) => array_val)}
            </ul>
        )
    }
}

export default Study;

-> map() 함수로 elementArr 배열에 있는 element들을 순서대로 꺼내 <ul> 태그 안쪽에 출력한다.

reactstrap

1. Alerts

npm i --save reactstrap

import React, { Component } from 'react'
import { Alert, UncontrolledAlert } from 'reactstrap';

class Study extends Component {
    render() {
        return (
            <div>
                <Alert color='light'>Simple Alert [color : light]</Alert>
                <UncontrolledAlert color='warning'>
                    UncontrolledAlert [color : warning]
                </UncontrolledAlert>
            </div>
        )
    }
}

export default Study;

-> color 속성은 primary, seconndary, success, danger, warning, info, light, dark로 각각 다른 색을 적용할 수 있다.

2. Badge, Button

import React, { Component } from 'react'
import { Badge, Button } from 'reactstrap';

class Study extends Component {
    render() {
        return (
            <div>
                <h1>Product name <Badge color='secondary'>hit</Badge></h1>
                <Button color='light' outline>
                    Accessor <Badge color='dark'>4</Badge>
                </Button>
                <Badge color='danger' pill >pill</Badge>
                <Badge href="http://naver.com" color='light' >GoLink</Badge>
            </div>
        )
    }
}

export default Study;

-> 텍스트 옆에 뱃지를 추가할 수 있고, pill 속성은 테두리를 둥글게 하고 href 속성을 추가해 배지에 링크를 연결할 수 있다.

3. Breadcrumb, BreadcrumbItem

import React, { Component } from 'react'
import { Breadcrumb, BreadcrumbItem } from 'reactstrap';

class Study extends Component {
    render() {
        return (
            <div id='top'>
                <Breadcrumb tag="nav" listTag="div">
                    <BreadcrumbItem tag="a" href="#top">Go_top</BreadcrumbItem>
                    <BreadcrumbItem tag="a" href="#bottom">Go_bottom</BreadcrumbItem>
                </Breadcrumb>
                <div id='bottom' style={{marginTop:"1000px"}}>
                    <span>bottom</span>
                </div>
            </div>
        )
    }
}

export default Study;

-> tag 속성으로 태그를 선택할 수 있고, a라면 href 속성으로 웹 링크 혹은 태그의 id 값으로 이동할 수 있다.
개발자 도구로 코드를 보면 nav > div > a 로 돼있는 것을 볼 수 있다.

4. Button Dropdown

: 대표 메뉴를 클릭하면 하위 메뉴 리스트가 표시되는 기능

import React, { Component } from 'react'
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';

class Study extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dropdownOpen : false
        }
    }

    toggle = (e) => {
        this.setState({dropdownOpen : !this.state.dropdownOpen});
    }

    render() {
        return (
            <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                <DropdownToggle caret >버튼 Dropdown</DropdownToggle>
                <DropdownMenu>
                    <DropdownItem header>헤더</DropdownItem>
                    <DropdownItem disabled>비활성화 버튼</DropdownItem>
                    <a href='http://naver.com'>
                        <DropdownItem>naver로 이동</DropdownItem>
                    </a>
                    <DropdownItem onClick={e => alert("Alert 버튼")}>Alert 버튼</DropdownItem>
                </DropdownMenu>
            </ButtonDropdown>
        )
    }
}

export default Study;

-> isOpen 값이 true이면 하위 메뉴가 표시되고 false아면 표시가 되지 않는다.
버튼 영역을 클릭하면 toggle 함수가 실행되고 하위 메뉴 표시 상태 값을 반대로 만들어준다.
disabled 속성을 추가하면 버튼을 클릭해도 반응하지 않고, a 태그로 버튼을 감싸면 버튼을 클릭했을 때 원하는 url로 이동할 수 있다.

reactstrap은 더 설명이 되어있는데, 많이 쓰이는 것 같지 않아 이 정도로 간만 보고 건너뛸 예정.

방학이 거의 끝나가서 나태해졌는데 카페라도 가서 열심히 해야겠다!

스우파 존잼 ... ❤

저작자표시 (새창열림)