리액트에 대해 놓친 부분이 많아서 공식문서를 통해 몰랐던 부분을 체크하기
구성 요소를 만들고 중첩하는 방법
마크업과 스타일을 추가하는 방법
데이터를 표시하는 방법
조건 및 목록을 렌더링하는 방법
이벤트에 응답하고 화면을 업데이트하는 방법
구성 요소 간에 데이터를 공유하는 방법
React에서는 className. 이는 HTML class속성과 동일한 방식으로 작동합니다.
<img className="avatar" />
조건부 렌더링
let content;
if (isLoggedIn) {
content = <AdminPanel />;
} else {
content = <LoginForm />;
}
return (
<div>
{content}
</div>
);
또는 삼항 연산자를 이용한
<div>
{isLoggedIn ? (
<AdminPanel />
) : (
<LoginForm />
)}
</div>
논리 구문을 이용한
<div>
{isLoggedIn && <AdminPanel />}
</div>
조건부 렌더링을 사용할때 css적으로 처리하는데
tailwind를 사용하게되면 코드가 불필요하게 길어질 수 있어서
조건부 렌더링 방식으로 사용하는건 어떨까 생각하게 됩니다
이벤트 핸들러
1.
<button onClick={handleClick}>
Click me
</button>
2.
<button onClick={handleClick()}>
Click me
</button>
두 이벤트 핸들러의 차이점은 1번은 버튼을 클릭했을때 반응하고
2번은 랜더링될때 실행되고 버튼을 눌러도 아무 반응이 없습니다useState Hook
useState에 관해서 질문을 받았는데 동기적, 비동기적 어떤 방식으로 작동하나요?
랜더링 되는 과정에서 useState를 못 받아오는 경우가 생각났지만 동기적으로 말씀드렸고
비동기적이라고 설명해주시면서 정확하진 않다 공식문서를 봐야한다고 말씀하셨는데
결과는 ...
seState는 완전히 비동기적으로 작동하는 것은 아닙니다. 그러나 React의 렌더링과 상태 업데이트 과정을 이해하면 비동기적인 행동을 보이는 것처럼 느껴질 수 있습니다.
내가 정확이 이해하고 말씀드리진 않았지만 동기적으로 작동하는것이였다
여기서 중요한 점은 setState 함수 호출이 즉시 상태를 업데이트하지 않는다는 것입니다. 대신, React는 상태 업데이트를 예약하고, 이후 렌더링 과정에서 새로운 상태를 반영합니다. 이는 성능 최적화를 위한 React의 동작 방식입니다.
이 부분을 정확히 이해하려면
React의 랜더링과 상태 업데이트 시스템의 작동 방식에 대해 먼저 이해가 필요합니다
React의 렌더링과 상태 업데이트 시스템은 성능 최적화를 위해 특별히 설계되었습니다. 이 시스템을 이해하려면 두 가지 주요 개념인 '가상 DOM'과 '비동기 상태 업데이트'를 알아야 합니다.
가상 DOM (Virtual DOM)
React는 가상 DOM이라는 개념을 도입하여 UI를 효율적으로 업데이트합니다. 가상 DOM은 실제 DOM의 가벼운 복사본으로, 실제 DOM에 직접적인 변화 없이 먼저 가상 DOM에서 변화를 처리합니다. 이후에 이 변화들을 실제 DOM에 반영하는데, 이 과정을 '재조정(Reconciliation)' 또는 'Diffing'이라고 합니다. 이 방식으로 인해 브라우저의 부하를 줄이고 성능을 향상시킬 수 있습니다.
비동기 상태 업데이트
React의 setState 함수는 상태를 즉시 변경하지 않습니다. 대신, React는 상태 업데이트를 일정한 시간 간격으로 일괄 처리하려고 합니다. 이렇게 하면 여러 상태 업데이트가 한 번에 처리되어 성능이 향상됩니다. 이러한 동작은 때때로 setState가 비동기적으로 동작하는 것처럼 보이게 만듭니다.
이 두 가지 특성 때문에, React는 상태 업데이트와 렌더링을 효율적으로 처리하며, 이로 인해 웹 애플리케이션의 성능이 크게 향상됩니다.즉 주기적으로 한번에 처리하기 때문에 비동기처럼 보일 수 있다는 얘기이다
1.
const [count, setCount] = useState(0);
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
2.
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
위 예제에서 보듯이 count의 값은 1번이 1 2번은 3이 나오게 되는것이다이런 질문을 받은적이 있다 react 훅을 만들어서 사용해보신적이 있나요?
스스로가 필요해서 훅을 만든적이 없다고 생각해서 없다고 말씀드렸지만
function MyButton() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<button onClick={handleClick}>
Clicked {count} times
</button>
);
}위 코드도 Hook이라는걸 깨달았습니다
