프론트엔드

제어 컴포넌트 const [value, setValue] = useState(''); function handleChange(e) { setValue(e.target.value); } 위의 예시를 살펴보면, 텍스트를 입력할 때마다 handleChange 함수를 통해 value state 값을 변경해주고, 이렇게 변경된 value는 value prop을 통해 다시 내려보내준다. 이처럼 state를 통해 input value 값을 관리하는 방식을 제어 컴포넌트라고 부른다. 제어 컴포넌트는 그 값을 예측하기가 쉽고 인풋에 쓰는 값을 여러 군데서 쉽게 바꿀 수 있다는 장점이 있어서 리액트에서 권장하는 방법인데, 이때 제어를 하는 주체가 State냐 Prop이냐는 중요하지 않고, 리액트로 value를 지정한다는 ..

useEffect useEffect를 호출하면 리액트는 정해진 콜백 함수를 등록하고, useEffect의 두 번째 파라미터인 'dependency list'의 내용도 기억한다. 랜더링이 끝나면 등록된 콜백 함수를 실행하며, 이로 인해 다시 랜더링하는 과정에서 또다시 useEffect가 호출된다. 이 때 리액트는 이전에 기억한 dependency list 값과 콜백 실행 이후의 dependency list 값을 비교하는데, 이 값이 동일하다면 useEffect는 콜백을 등록하지 않는다. const handleLoad = async () => { const { foods } = await getFoods(); setItems(foods); }; useEffect(() => { handleLoad(); }, ..

리액트 컴포넌트 리액트 엘리먼트의 재사용성을 높이고, 다양한 속성들을 자유롭게 사용하기 위해 이러한 엘리먼트를 특정한 함수의 리턴 값으로 사용하게 되는데, 이를 리액트 컴포넌트라고 부른다. 이러한 컴포넌트의 경우 함수 이름을 통해 하나의 태그처럼 활용할 수가 있게 된다. 리액트 컴포넌트를 생성하기 위해서는 반드시 함수의 첫 글자를 대문자로 작성해주어야 한다. import ReactDOM from 'react-dom'; const Hello = () => Hello World; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 이런 특성을 모듈 문법으로 활용하면 컴포넌트 특성에 집중해서 훨씬 더 독립적인 코드..

단어 집합 [ ]집합 내에 해당하는 단어가 포함되어있으면 선택된다. 가령 [bcd]ash 라고 검색하면 bash, cash, dash가 모두 선택되는 식이다. 혹은 하이픈(-)을 사용하여 이를 더 간단하게 적어줄 수 있는데, 동일한 예시에서라면 [b-d]ash로 사용할 수 있다. 보다 긴 예시에서라면 소문자 a에서부터 소문자 z까지의 단어 집합을 [a-z]로 표현하게 된다.숫자 집합 : [0-9]소문자 집합 : [a-z]대문자 집합 : [A-Z]한글 집합 : [가-힣]만약 숫자 집합과 대문자 집합을 한 번에 표기하려고 [0-Z]로 쓰게 되면 생각지 못했던 특수 문자들이 함께 검색되는 것을 확인할 수 있다. 이는 하이픈이 아스키코드를 사용해 문자 집합을 표현하기 때문이다. [0-Z]라는 표현식은 아스키코드..