[React.ts] React๋ฅผ Typescript๋กœ ์‹œ์ž‘ํ•ด๋ณด๊ธฐ - Props, State

๋ฐ˜์‘ํ˜•

์ด๋ฒˆ ๊ธ€์—์„œ๋Š” Props, State๋ฅผ Typescript์—์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Javascript์—์„œ๋Š” state๋ฅผ ์ •์˜ํ•˜๊ธฐ ์œ„ํ•ด ์ƒ์„ฑ์ž๋ฅผ ์‚ฌ์šฉํ•˜์˜€๊ณ , ํ•ด๋‹น ์ƒ์„ฑ์ž์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ Props๋ฅผ ๋„ฃ์–ด์ฃผ์—ˆ์œผ๋ฉฐ Props๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด, ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ ๋ฐ‘์— Props ํƒ€์ž…์„ ์ •์˜ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. 

import React, { Component } from 'react';


class Header extends Component {
    constructor(props) {
    	super(props);
        
        this.state = {
            ...
        };
    }

    render() {
    	return (
    		<div>
        	    Practice App
        	</div>
    	);
    }
}

export default Header;

ํ•˜์ง€๋งŒ Typescript์—์„œ ์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, Type์„ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค๋Š” ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ๋งŒ๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ๋Š” Props์™€ State๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ๊ฒƒ์ธ์ง€ ๊ทธ ์–‘์‹์„ ์ •ํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. 

Typescript์—์„œ๋Š” ์ด๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • Type์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•
  • Interface๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

Props, State ๋‘˜ ๋‹ค ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๊ฐ™์Šต๋‹ˆ๋‹ค. Interface๋Š” OOP ์–ธ์–ด๋ฅผ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋ถ„๋“ค์ด๋ผ๋ฉด ๋ˆˆ์น˜์ฑ„์…จ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ณดํ†ต Java์—์„œ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํด๋ž˜์Šค์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ๋ฏธ๋ฆฌ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉํ–ˆ์—ˆ์ฃ . Typescript์—์„œ๋Š” ๋ฉ”์†Œ๋“œ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…๋„ ๋ฏธ๋ฆฌ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ˜๋Œ€๋กœ Type ๋ฌธ๋ฒ•์€ C, C++์—์„œ typedef struct์™€ ๋น„์Šทํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์กฐ์ฒด๋ฅผ ์ •์˜ํ•  ๋•Œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” typedef๋Š” ์‹ค์ œ๋กœ ํƒ€์ž…์„ ์žฌ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๊ณ , struct๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ์„œ๋กœ ๋‹ค๋ฅธ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์“ฐ๋Š” ๋ฐฉ๋ฒ•์ด์ฃ . Typescript์—์„œ๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ์„œ๋กœ ๋‹ค๋ฅธ ๋ณ€์ˆ˜๋ฅผ ์ €์žฅํ•ด๋†“๊ณ  ์ด ์ด๋ฆ„์„ ์ •์˜๊นŒ์ง€ ํ•˜๋Š” ๊ฒƒ๊นŒ์ง€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

Class-like

import React, { Component } from 'react';

type appProps = {};

type appState = {
    title: string;
}

class Header extends Component<appProps, appState> {
    constructor(props: appProps) {
    	super(props);
        
        this.state = {
            title: "Practice App"
        };
    }
    
    render() {
    	return (
            <div>
            	{this.state.title}
            </div>
        );
    }
};

export default Header;

 

type์œผ๋กœ ์ •์˜ํ•  ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ = ์„ ๋ถ™์—ฌ์ฃผ์„ธ์š”.

 

import React, { Component } from 'react';

interface appProps {}

interface appState {
    title: string
}

class Header extends Component<appProps, appState> {
    constructor(props: appProps) {
    	super(props);
        
        this.state = {
            title: "Practice App"
        };
    }
    
    render() {
    	return (
            <div>
            	{this.state.title}
            </div>
        );
    }
};

export default Header;

interface๋กœ ์ •์˜ํ•  ๋•Œ๋Š” Java์™€ ๋™์ผํ•˜๊ฒŒ ์ง„ํ–‰ํ•˜ ๋˜, ๊ฐ ๋ณ€์ˆ˜ ์ด๋ฆ„๊ณผ ํƒ€์ž…์€ Json ์ •์˜ํ•˜ ๋“ฏ๋งŒ ์ง„ํ–‰ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. 

Class๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐํ•  ๋•Œ๋Š” ์ƒ์„ฑ์ž์— state ๊ฐ’์„ ์ดˆ๊ธฐํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์ง€๋งŒ Type์ด๋‚˜ Interface์— ์ง์ ‘ ๊ทธ ๊ฐ’์„ ์ดˆ๊ธฐํ™” ํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ์„ฑ์ž์—์„œ ๊ฐ’์„ ์ดˆ๊ธฐํ™” ํ•  ๊ฒฝ์šฐ, Props์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ •์˜ํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

import React, { Component } from 'react';

interface appProps {
    subTitle?: string;
}

interface appState {
    title: string;
}

class Header extends Component<appProps, appState> {
    constructor(props: appProps) {
    	super(props);
        
        this.state = {
            title: "Practice App"
        };
    }
    
    render() {
    	return (
            <div>
            	{this.state.title}
            </div>
        );
    }
};

export default Header;

๋‹จ, Props์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ •ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ Genericํ•  ๊ฒฝ์šฐ, ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ˜๋“œ์‹œ ํ•ด๋‹น Props์˜ ๊ฐ’์„ ๋„ฃ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์•„๋ฌด๋Ÿฐ ๊ฐ’๋„ ๋„ฃ์ง€ ์•Š์„ ๊ฒฝ์šฐ, ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉฐ, ์ด ์˜ค๋ฅ˜๋Š” ๋งˆ์น˜ Java์˜ NullPointerException๊ณผ ํก์‚ฌํ•œ ๋ชจ์Šต์œผ๋กœ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

๋งŒ์•ฝ ๋ฐ์ดํ„ฐ๋งŒ ์ •์˜ํ•˜๊ณ , ๋‚˜์ค‘์— ์ด ๊ฐ’์„ ๋„ฃ์œผ๋ ค ํ•œ๋‹ค๋ฉด, ๊ฐ ๋ณ€์ˆ˜์— '?'๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด ๊ฐ’์ด NULL์ผ ์ˆ˜๋„ ์žˆ์Œ์„ ์•Œ๋ ค์ฃผ์„ธ์š”.

 

Functional Programming

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์œผ๋กœ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ์•ฝ๊ฐ„์˜ ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. React 16.x ๋ฒ„์ „๋ถ€ํ„ฐ ์ƒˆ๋กœ์ด ๋‚˜์˜จ React Hooks๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” interface๋‚˜ type ๋ฌธ๋ฒ•์œผ๋กœ State๋ฅผ ์ •์˜ํ•ด์ฃผ์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค. 

import React, { useState } from 'react';

interface appProps {
    title?: string;
    subtitle?: string;
}

const Header = ({ title, subtitle }: appProps) => {
    const [msg, setMsg] = useState('Welcome to My App');
    
    return (
        <div>
            {msg}
        </div>
    );
};

export default Header;

useState๋Š” React 16.x์—์„œ ์ƒˆ๋กœ์ด ๋‚˜์˜จ ํ•จ์ˆ˜์ด๋ฉฐ state ๊ฐ’์„ ์ •์˜ํ•˜๊ฑฐ๋‚˜ ๋ฐ”๊ฟ€ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ๊ธฐ์กด์—๋Š” setState๋ผ๋Š” ๋น„๋™๊ธฐ ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์˜€์ง€๋งŒ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ๋Š” useState๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ state ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•
TAGS.

Tistory Comments