React - useState, conditional rendering, Fragment

Vue3에서 웹 화면에 변경 되는 반응형 값에 ref, reactive를 사용하듯이,
React에서는 useState를 사용해 변경감지를 한다.

useState

import {useState} from 'react';

function ExampleApp() {
	const [selectedTopic, setSelectedTopic] = useState('Initial Value');
    
    fuction handleUserSelect(selectedValue) {
    	setSelectedTopic(selectedValue)
    }
    
    
    ...
    {selectedTopic}
}

React에서 앞에 'use' prefix가 붙은 것들은 react hooks에 속한다.

useState Rules
- react Hooks는 react component function 안에서 호출 되거나, custom react hooks안에서 호출 되어야 한다!
- 또한, 가장 상위 레벨에서 호출되어야 한다. (nested된 function에서 호출 하지 말기)
- useState으로 선언된 변수는, 현 상태와, setter로 구성된다. 항상 이 두가지로 구성됨!

 

Conditionals

jsx에서 if, else 문을 사용하기 위해서는 다음과 같이 사용한다.

#isTrue가 특정 값이고, true일때, <p>태그가 화면에 표시됨
{isTrue ? <p>It is True</p> : null}

또는 좀 더 짧게 표시하자면 다음과 같이 표시한다.
앞의 조건이 True라면, 뒤의 구문이 실행되는 방식이다.

{isTrue && <p>It Is True</p>}

 

Fragment

Jsx를 사용해서 화면을 제공할때, return 하는 태그는 하나의 쌍으로 이루어져야한다.
이 때문에, 불필요한 div로 child 컴포넌트들을 감싸게 되는데, 이를 대신 해줄수 있는 것이 Fragment이다.

기존 코드 - div를 사용

function App() {
	return (
		<div>
        	<ChildComponent1/>
            <ChildComponent2/>
            ...
		</div>
	)
}

-> network탭, Elements 확인시

fragment사용시

import {Fragment} from 'react';

function App() {
	return (
		<Fragment>
        	<ChildComponent1/>
            <ChildComponent2/>
            ...
		</Fragment>
	)
}

-> network탭, Elements 확인시 불필요하게 사용되었던 div태그가 사라진걸 확인할 수 있다.