[React] Handling Events & Conditional rendering

Handling Events

 

DOM의 Event

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

DOM에서 클릭 이벤트를 처리하는 예제 코드

• 버튼이 눌리면 Activate 라는 함수를 호출하도록 되어있음.
• 클릭 이벤트를 처리할 함수를 onClick을 통해서 전달

 

리액트의 Event

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

• onClick으로 카멜 케이스 표기법
• 이벤트를 처리할 함수 그대로를 전달

 

Event Handler

어떤 사건이 발생하면 사건을 처리하는 역할

이벤트 리스너라고 부르기도 함.

 

함수 컴포넌트 이벤트 핸들러 추가 방법

function Toggle(props){
	const [isToggleOn, setIsToggleOn] = useState(true);
	
	//방법1. 함수 안에 함수로 정의
	function handleClick() {
		setIsToggleOn((isToggleOn)=>!isToggleOn);
	}
	
	//방법2. arrow function을 사용하여 정의
	const handleClick = () =>{
		setIsToggleOn((isToggleOn)=>!isToggleOn);
	}
	
	return(
		<button onClick={handleClick}>
			{isToggleOn? "켜짐" : "꺼짐"}
		</button>
	);
}

1. 함수 안에 함수로 정의
2. arrow function을 사용하여 정의

 

함수 컴포넌트에서 Argument에 전달하기

function MyButton(props){
	const handleDelete = (id, event) => {
		console.log(id, event.target);
	};
	
	return (
		<button onClick={(event)=>handleDelete(1, event)}>
			삭제하기
		</button>
	);
}

매개변수의 순서는 변경해도 됨

 

---

 

 

(지금은 클래스 컴포넌트를 거의 사용X, 아래는 참고용!!)

클래스 컴포넌트 이벤트 핸들러 추가 방법

calss Toggle extends React.Component {
	constructor(props){
		super(props);
		
		this.state = {isToggleOn: ture};
		
		this.handleClick = this.handleClick.bind(this);
}

	handleClick() {
	this.setState(prevState=>({
		isToggleOn:!prevState.isToggleOn
		}));
	}

	render(){
		return(
			<button onClick={this.handleClick}>
				{this.state.isToggleOn?'켜짐' : '꺼짐'}
			</button>
		);
	}
}

버튼을 클릭하면 이벤트 핸들러 함수인 handleClick 함수를 호출하도록 되어 있음.

아래 handleClick() 함수를 정의하고 constructor 에서 바인드를 이용하여 대입

 

바인드를 하는 이유?

• 자바스크립트에서는 기본적으로 클래스 함수들이 바운드 되지 않기 때문
  • 바운드 되지 않으면 글로벌스코프에서 실행됨

 

class MyButton extends React.Component {
	handleClick = () => {
		console.log('this is:', this);
	}
	
	render(){
		return (
			<button onClick={this.handleClick}>
				클릭
			</button>
		);
	}
}

바인드를 사용하지 않고 쓰는 방법

classFieldSyntax를 사용

 

 

class MyButton extends React.Component{
	handleClick(){
		console.log('this is:', this);
	}
	
	render() {
		//이렇게 하면 `this`가 바운드됨
		return(
			<button onClick={()=>this.handleClick()}>
				클릭
			</button>
		);
	}
}

핸들러를 넣는 곳에 arrow function을 사용

이 방식은 MyButton 컴포넌트가 렌더링 될 때마다 다른 콜백함수가 생성되는 문제가 있음.

 

this사용하지 않고 onClick에 바로 정의한 이벤트 핸들러를 넘기면 됨.

 

 

클래스 컴포넌트에서 Argument에 전달하기

arguments - 함수(이벤트 핸들러)에 전달할 데이터

파라미터라는 용어도 자주 사용

<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>

<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>

위 - arrow function 사용

• 명시적으로 이벤트를 두 번째 매개변수에 넣음

아래 - bind 사용

• 이벤트가 자동으로 id 이후에 두 번째 매개변수로 전달

 

 

Conditional Rendering

 

조건부 렌더링

조건부 렌더링 - 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미한다.

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 />;
}

props로 들어오는 isLoggedIn의 값에 따라서 화면에 출력되는 결과가 달라진다.

 

자바스크립트의 truthy와 falsy

truthy: 자바스크립트에서 true는 아니지만 true로 여겨지는 값

falsy: false는 아니지만 false로 여겨지는 값

//truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

//falsy
false
0, -0
0n
'', "", ``
null
undefined
Nan

 

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] = useState(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

조건문을 코드 안에 집어넣는 것

Inline IF - && 연산자 사용

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

unreadMessage.length>0 조건에 따라 뒤에 <h2>태그 렌더링 유무가 정해짐

 

Inline If-Else - ? 연산자를 사용

function UserStatus(props){
	return(
		<div>
			이 사용자는 현재 <b>{props.isLoggedIn? '로그인' : '로그인하지 않은'}</b> 상태입니다.
		</div>
	)
}

문자열이 아닌 앨리먼트를 넣어서 사용할수도 있음.

 

컴포넌트 렌더링 막기

null을 리턴한다