Life goes slowly...

이벤트 발생과 그에 따른 이벤트 핸들러 콜백 함수를 다루는 것은 프로그램 코드를 작성하는데 가장 중요한 개념입니다. 클릭이벤트처럼 단순하지 않으며 키보드의 입력이 지속적으로 발생할 경우 여러 번의 이벤트를 통하여 API를 호출하게 되면 서버에 과부하가 발생하게 됩니다. debounce란? debounce란 특정 이벤트가 발생할 때에 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기 위하여 사용되는 함수입니다. onchange() 함수를 통하여 이벤트가 발생할 때마다 서버에 API를 호출하기보다는 일정 시간이 지난 후에 서버 API를 호출하게 되는 지연 호출의 역할을 하는 함수를 말합니다. 함수의 설정마다 다르겠지만 호출되는 함수들 중 마지막 또는 제일 처음만 호출하도록 하는 함수입니다.비슷한 함수..

React에서는 HTML을 직접적으로 작성하지 않고 유사해 보이는 JSX을 사용합니다. JSX란 자바스크립트의 확장된 문법으로써 XML과 비슷하게 생긴 프로그래밍 언어입니다. React의 JSX란? JSX란 자바스크립트의 확장된 문법으로써 Javascript XML의 줄임말입니다. JSX는 React에서 사용되는 문법으로 공식적인 자바스크립트 문법은 아닙니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 문법으로 변환됩니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정하여 개발자들이 임의로 만든 문법 또는 자바스크립트의 문법을 사용할 수 있도록 변환합니다. JSX 문법 규칙 1. 부모의 요소 하나가 반드시 감싸는 형태야 하는 규칙 - Virtual ..

Each child in a list should have a unique "key" Error 발생 Warning: Each child in a list should have a unique "key" prop. React 프로젝트를 진행 중에 발생하는 Error입니다. 이는 Chrome의 개발자 도구인 Console에서 확인할 수 있으며 React에서 map 함수를 사용하여 반복문을 사용하는 경우에 발생하는 스크립트 오류입니다. React에서는 key prop를 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성합니다. React 라이브러리는 이 관계를 이용하여 컴포넌트 렌더링 여부를 결정하기 때문에 불필요한 렌더링을 방지하기 위하여 각 자식 컴포넌트마다 독립적인 Key 값을 넣어줘야 하는데 Key 값..

cannot appear as a child of . Error 발생 Warning: validateDOMNesting(...): cannot appear as a child of . React 프로젝트를 진행 중에 발생하는 Error입니다.이는 Chrome의 개발자 도구인 Console에서 확인할 수 있는 Error로써 스크립트 오류로 확인할 수 있습니다.이는 태그 안에 태그가 들어가면 안 된다는 스크립트 오류입니다.( 자식으로 가 올수 없다는 경고)그리고 React의 JSX에서 Table를 쓸때에는 유의해야 할 부분이 있습니다.React의 JSX 사용시 반드시 tbody와 thead를 써야 하며 tbody를 선언해야만 tr과 td를 사용할 수 있습니다. 그리고 thead를 작성해야만 th를 사용할 수..

React를 개발 시 JSX 또는 일반 코드 작성 시에 조건문인 IF/ELSE를 사용하는 경우가 있습니다. React에서는 컴포넌트에 render 함수가 필요하며 JSX로 Return을 해줘야 하기에 IF문 또는 Switch문 사용이 제한이 있습니다. 그렇기에 삼항 연산자 또는 &&연산자를 많이 사용하게 됩니다. React에서는 IF 조건문을 어떻게 사용하는지 알아보도록 하겠습니다. React IF/ELSE 문 React에서 IF/ELSE문을 사용하려면 컴포넌트에서 JSX를 조건에 따라서 작성해야만 합니다. function Component() { if ( true ) { return Component True; } else { return null; } } React 삼항연산자 삼항 연산자란 React..