[React] 리액트의 기초 문법 몇 가지_2탄

[React] 리액트의 기초 문법 몇 가지_2탄

 

'리액트의 기초 문법 몇 가지_1탄'은 아래 링크에서 확인할 수 있다.

[React] 리액트의 기초 문법 몇 가지_1탄

 

 

 

6. props 선언 규칙

import React from 'react';

function Test() {
    return <h1>Hello React</h1>
}

function App() {
    return (
        <Test greeting="hello" />
    );
}

export default App;

HTML에서는 <div class="hello"></div> 와 같은 형식으로 작성하지만

JSX에서는 <Test greeting="hello" /> 와 같이 작성한다.

이를 해석하자면, Test 컴포넌트의 greeting라는 속성을에 hello라는 value를 준 것이다.

이렇게 greeting="hello"와 같은 것을 props라고 부른다.

 

props가 뭔지 감이 안 온다면 console.log(props)를 통해 직접 확인해볼 수도 있다.

import React from 'react';

function Test(props) {
    console.log(props)
    return <h1>Test message</h1>
}

function App() {
    return (
        <Test
            greeting="hello"
            name={true}
            abc={[1, 2, 3, "abc"]}
        />
    );
}

export default App;

위와 같이 입력한 후 콘솔 창을 확인해보면

abc: (4) [1, 2, 3, "abc"]
greeting: "hello"
name: true

위 내용이 출력되면, 이것이 바로 props이다.

 

console.log(props.greeting), console.log(props.name), console.log(props.abc)를 입력하면

각각 "hello", true, [1, 2, 3, "abc"]가 나온다.

 

 

function Test(props) {
    console.log(props.greeting)
}

function Test({greeting}) {
    console.log({greeting})
}

위 둘은 같다.

 

 

import React from 'react';

function Test({greeting}) {
    return <h1>{greeting} message</h1>
}

function App() {
    return (
        <Test
            greeting="hello"
            name={true}
            abc={[1, 2, 3, "abc"]}
        />
    );
}

export default App;

위의 {greeting}와 같이 중괄호{} 안에 속성을 입력하면

해당 속성에 해당하는 값을 띄울 수 있다.

위의 코드대로 작성하면 화면에는 "hello message"라고 떠있을 것이다.

 

 

import React from 'react';

function Test({greeting}) {
    return <h1>{greeting} message</h1>
}

function App() {
    return (
        <Test greeting="hello1"  />
        <Test greeting="hello2"  />
        <Test greeting="hello3"  />
    );
}

export default App;

Test 컴포넌트를 여러 개 만들면 해당하는 컴포넌트 개수만큼 반영된다.

hello1 message
hello2 message
hello3 message

이렇게 hello1, hello2, hello3가 모두 프린트 될 것이다.

 

 

 

7. map 사용 방법

map은 function을 취해서 그 function을 array의 각 item에 적용한다.

 

리액트에서는 JavaScript 버전으로 map을 사용할 수 있다.

food.map(function(current) {
    console.log(current);
    return 0;
})        // [0, 0, 0, 0] 반환

 

위의 코드를 arrow function으로 작성하면 아래와 같다.

food.map(current => {
    console.log(current);
    return 0;
})        // [0, 0, 0, 0] 반환

 

map은 기본적으로 배열(array)에 취하는 것이다.

food라는 배열이 [snack, coffee, melon] 이라면, 아래의 map은 어떻게 반환 되는지 확인해 보자.

food.map(current => {
    return "I like " + current;
})        // ["I like snack", "I like coffee", "I like melon"] 반환

 

 

 

8. render()

작성한 코드로 눈에 보이는 화면을 구성하려면 렌더링이 꼭 필요하다.

리액트에는 이 렌더링을 render() 메서드가 담당한다.

 

리액트는 모든 클래스 컴포넌트의 render() 메서드를 자동적으로 실행한다.

 

import React from "react";

class App extends React.Component{  
    render() {    
        return <h1>a class component</h1>;
    }
}

export default App;

 

 

 

9. 컴포넌트의 생명주기(Lifecycle)

컴포넌트의 생명 주기로는 크게 mounting, updating, unmounting가 있다.

 

1) 마운트 (Mount)

마운트는 컴포넌트를 생성하는 것을 말한다.

componentDidMount()를 이용해 확인할 수 있다.

 

2) 업데이트 (Update)

업데이트는 컴포넌트를 변경하는 것, 즉 state을 변경하는 것을 말한다.

componentDidUpdate()를 이용해 확인할 수 있다.

 

3) 언마운트 (Unmount)

언마운트는 컴포넌트가 사라지는 것을 말한다.

컴포넌트가 사라지는 경우는 페이지를 바꿀 때이다.

componentWillUnmount()를 이용해 확인할 수 있다.

 

 

참고로, 이 메서드들은 클래스형 컴포넌트에서만 사용 가능하며, 자주 사용되지는 않으므로 가볍게 보길 추천한다.

 

 

10. JSX에서 주석 작성 방법

JSX 내부에서 주석을 작성하려면 {/* */} 형태로 작성한다.,

/* */ 가 아니고 중괄호로 이렇게 {/* */} 감싸야한다. 

 

import React from 'react';
import Hello from './Hello';

function App() {
    return (
        {/* 주석 */}
        <Hello  />
    );
}

export default App;

 

// 로 시작하는 주석도 사용 가능한데,

단, 이 주석은 열리는 태그 내부에서만 사용할 수 있다.

import React from 'react';
import Hello from './Hello';

function App() {
    return (
        <Hello
            // 주석
        />
    );
}

export default App;