React 컴포넌트 내부에서 변수, 함수 사용

리액트는 컴포넌트 내부에서 변수와 함수를 사용 할 수 있다.

render 함수 내부에서

es6 문법인 const(상수) 나 let(변수) 를 사용하여 변수를 할당하고 값을 담은 후에

컴포넌트 내부에서 { } 중괄호를 사용하여 변수를 사용 할 수있다.

함수도 마찬가지로 render 함수 내에서 선언하고 { } 중괄호를 사용해 실행 할 수 있다.

vue.js 에서 내부 변수 사용시에는 {{ }} 중괄호 두개로 사용을 했었는데 React 에서는 { }로 변수 사용을 하고

변수가 Object 타입인 경우에 {user} 이런식으로 사용하면 에러가 난다.

vue.js 는 Object 타입이더라도 {{user}} 로 변수를 랜더링 하더라도 Object의 전체 값을 다 보여주는데

React는 그게 안되는 것 같다.

class App extends Component {
    render() {
        const user = {
            firstName: 'Bruce',
            lastName: 'Lee'
        };
        function getUser() {
            return user.firstName + user.lastName
        }
        return (
            <div className="App">
                <div>{user.firstName}</div>
                <div>{user.lastName}</div>
                <div>{getUser()}</div>
            </div>
        );
    }
}

결과

const user = {
    firstName: 'Bruce',
    lastName: 'Lee'
};

function getUser() {
    return user.firstName + user.lastName
};

class App extends Component {
    render() {
        return (
            <div className="App">
                <div>{user.firstName}</div>
                <div>{user.lastName}</div>
                <div>{getUser()}</div>
            </div>
        );
    }
}

이런식으로 컴포넌트 밖에서 변수와 함수를 선언하고 사용 할 수 도 있는데 차이점은 아직 잘 모르겠다.

참고

https://reactjs.org/docs/getting-started.html

https://velopert.com/reactjs-tutorials