[React]리액트 - Event, Condition, List and Keys

📝 Handling Event

Event란 무엇일까?
컴퓨터 프로그래밍에서 이벤트는 상호작용 즉 사건이라 보면 된다.

돔의 이벤트

<button onclick="activate()">
	Activate
</button>

버튼이 눌리면 함수를 호출하게 하는 onClick을 통해 전달한다.

 

리액트의 Event

<button onClick={activate}>
	Activate
</button>

 

 

🚩 Event Handler 정의하기

이벤트 핸들러는 이러한 이벤트를 적용하는 역할을 한다.

import React from 'react';

class MyComponent extends React.Component {
  handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        클릭하세요
      </button>
    );
  }
}

 

📝 Conditional Rendering

컨디셔널 렌더링
쉽게 말하면 조건부 렌더링이라 생각하면 된다.
어떠한 조건에 따라 렌더링이 달라지는 것을 말한다.

• 즉 쉽게 말하면 true, false에 따라 렌더링을 다르게 하면 된다. 

function UserGreeting(props){
    return <h1>처음 오셨군요</h1>
}

function GuestGreeting(props){
    return <h1>게스트이신가요?</h1>
}

function Greeting(props){
    const isLoggedIn = props.isLoggedIn;

    if(isLoggedIn){
        return <UserGreeting/>;
    }
    return <GuestGreeting/>;
}

위 코드는 들어온 유저에 대해 렌더링을 다르게 하는 것이다.

이것을 조건부 렌더링이라 한다.

 

🚩 Element Variables

조건부 렌더링을 사용하다보면 렌더링 해야될 컴포넌트를 변수처럼 다루고 싶을 때 사용하는 것이다.

function LoginButton(props){
    return (
        <button onClick={props.onClick}>
            로그인
        </button>
    );
}

function LogoutButton(props){
    return (
        <button onClick={props.onClick}>
            로그아웃
        </button>
    );
}

function LoginControl(props){
    const [isLoggedIn, setIsLoggedIn] = userState(false);

    const handleLoginClick = () => {
        setIsLoggedIn(true);
    }
    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    }
    //엘리먼트를 저장할 변수 
    let button;
    
    if(isLoggedIn){
        button = <LogoutButton onClick={handleLogoutClick}/>;
    }else {
        button = <LoginButton onClick={handleLoginClick}/>;
    }
    return(
        <div>
            <Greeting isLoggedIn={isLoggedIn}/>
            {button}
        </div>
    );  
}

해당 코드처럼 엘리먼트를 직접 변수에 저장하여 관리할 수 있다. 

 

📝Inline Conditions

조건문을 코드 안에 집어넣는 것으로 더 간결하게 코딩할 수 있다. 

🚩 lineIF

간단하게 조건문을 만드는 방법이다.

function Malibox(props){
    const unreadMessages = props.unreadMessages;

    return(
        <div>
            <h1>안녕하세요!</h1>
            {unreadMessages.length > 0 &&
                <h2>
                    현재 {unreadMessages.length} 개의 읽지 않은 메시지가 있습니다.
                </h2>
            }
        </div>
    );
}

unreadMessages.length > 0 && <h2>

해당 코드처럼 &&를 기준으로 앞의 조건이 true이면 뒤의 폼을 렌더링하는 형식으로 이루어진다.

만약 앞의 조건이 false이면 아무것도 표시하지 않는다.

 

📝List and Key 

리액트에서는 배열과 키를 사용하여 반복되는 여러 개의 컴포넌트들을 쉽게 렌더링할 수 있다.

 

 

리스트와 키는
반복되는 다수의 렌더링에서 서로의 구별법을 제시한다.

🚩 자바스크립트의 map()

리액트에서는 map 함수를 이용해서 여러 개의 배열을 렌더링한다. 

const doubled = numbers.map((number) => number * 2);

위 처럼 배열의 모든 구성요소에 대해 연산을 구성하는 것이 map 함수의 역할이다.

 

🚩 리액트의 map()

이제 리액트의 map에 대해 살펴보자

const number = [1,2,3,4,5];
const listItems = numbers.map((number)=> <li>{number}</li>);

ReactDOM.render(
    <ul>{listItems}</ul>,
    document.getElementById('root')
);

위 코드는 각 숫자를 li 태그 안에 넣어 배열을 만들고 랜더링하는 코드이다.

 

최종적으로 아래 코드가 렌더링 된다.

ReactDOM.render(
    <ul>
        <li>{1}</li>
        <li>{2}</li>
        <li>{3}</li>
        <li>{4}</li>
        <li>{5}</li>
    </ul>,
    document.getElementById('root')
);

 

또한 우리가 잘하는 함수 컴포넌트로 작업하면 아래와 같이 할 수 있다.

function NumberList(props){
    const { numbers } = props;
    const listItems = numbers.map((number)=> <li>{number}</li>);

    return (
        <ul>{listItems}</ul>
    )

}

const number = [1,2,3,4,5];
ReactDOM.render(
    <NumberList numbers={numbers}/>,
    document.getElementById('root')
);

그러나 위의 코드는 오류가 나온다

 

이 경고문이 출력되는 이유는 리스트의 각 아이템에 대해 key가 없어 구별이 불가능하기 때문이다.

즉, 속한 집합 내에서 고유한 값이 필요하다.

 

키 넣어주기 

import React from "react";

function NumberList(props){
    const { numbers } = props;
    const listItems = numbers.map((number,index)=> <li>{number}</li>);

    return (
        <ul key={index}>{listItems}</ul>
    )

}

const number = [1,2,3,4,5];
ReactDOM.render(
    <NumberList numbers={numbers}/>,
    document.getElementById('root')
);

이렇게 하면 오류가 나오지 않지만 좋지 않은 방법이다.

• 그 이유는 배열의 순서는 언제든지 바뀔 수 있기 때문이다.
• 가장 권장하는 방법은 데이터베이스의 기본키처럼 id를 사용하는 것이 좋다.

 

 

✔ 예제가 필요하다면!

quddaz/My_React: 캡스톤 대비 리액트 학습 페이지 (github.com)

GitHub - quddaz/My_React: 캡스톤 대비 리액트 학습 페이지