개발을 하다보면, 코드 상에서 직접적으로 DOM을 조작하기도 합니다. 대표적으로 innerHtml을 사용하는 것이 직접적으로 DOM을 조작하는 것입니다.const article = document.getElementById('soccer-article');article.innerHTML = "content . . ."; 하지만, 이렇게 '직접적으로 DOM을 조작하는 것'은 보안적인 측면에서 위험할 수 있습니다. React에서도 이런 행동이 위험할 수 있다는 것을 상기시키기 위해, 직접 DOM을 조작할 때는 아래와 같이 어느정도 이름에서 위험도가 유추되는 'dangerouslySetInnerHtml'이라는 기능을 사용하도록 합니다.const contentHtml = 'First · Secon..
이번 글에서는 React에서 새롭게 제시한 React 코드 작성에 대한 권장사항 9가지를 보고 그 중 새롭게 알게 된 몇가지 사실에 대해 정리해보려 합니다.1. 반복문에서 요소의 key를 지정해주는 경우에는 index 사용을 지양하자key는 list의 요소를 추적하기 위해 사용됩니다. 이때 index는 요소를 고유하게 식별하지 않으므로 사용하는 것이 좋지 않습니다// 🛑 WRONGreturn ( {items.map((item, index) => ( … ))} );// 🟢 RIGHT, item.id가 안정적인 고유한 식별자라고 가정return ( {items.map((item, index) => ( … ))} );key를 index로 지정하게 되면 배열..
function DummyFunc({isA}) { if (!isA) { return ; // or null } return Hi I am A;} React에서는 아무 것도 렌더링하지 않으려 할 때 이렇게 fragment()나 null을 반환합니다.이번 글에서는 이런 상황에서의 fragment와 null에 차이를 알아보겠습니다.Fragment fragment는 DOM 구조에 어떠한 영향도 주지 않는 DOM 요소를 생성하지 않는 컴포넌트입니다.이런 fragment는 태그는 최상위 태그로 감싸줘야 하는 React에서 요소들을 그룹화 할 때 사용합니다.function DummyFunc() { return ( Hello ? );}Nullnull을 반환하게 되면 아무것..
React-hook-form을 통한 예외처리여러 개의 input tag를 사용하여 컴포넌트를 만들 때에는 보통 react-hook-form을 통해 예외처리를 합니다.import { useForm } from 'react-hook-form';const { register, handleSubmit } = useForm();return ( );위의 코드에서 만약 사용자가 이름을 12자 이상 작성했다면const onValid = (data) => { //do something};const inValid = (e) => { const name = e.name; if (name.type === 'maxLength') { console.log(..
오늘은 프로젝트를 진행하며 알게 된 'Batching'이라는 기법에 대해 알아보려고 합니다. 이번 포스팅에서는 Batching의 개념과 이점을 살펴보겠습니다.Batching이란?'Batch'는 '일괄'이라는 뜻을 가지고 있습니다. 그렇다면 'Batching'이란 무엇일까요? Batching은 '일괄 처리'라는 의미를 가집니다. 이 일괄 처리를 React에 적용시켜보면, 여러 개의 state 업데이트를 하나의 리랜더링으로 묶어 처리하는 것을 말합니다. 좀 더 자세한 이해를 위해 간단한 예제를 살펴보겠습니다. const [number, setNumber] = useState(0);const numberControler = () => { setNumber((number) => number + 1); set..
