React4 useEffect의 빈 배열 dependency과 No dependency의 차이 React의 대표적인 hook 중 하나인 useEffect는 기본적으로 랜더링이 될때마다 내부 callback이 실행됩니다. 이 내부 callback 함수를 조건부로 실행시키고 싶을 때 dependency array를 이용하며, 이는 useEffect의 두번째 인자에 해당됩니다. 두번째 인자에 dependency array를 넣어준다면, 컴포넌트가 랜더링 될때마다 callback을 실행시키는 것이 아니라 dependency array에 포함된 변수가 변경될 때만 callback을 실행시킬 수 있습니다. 그렇다면 dependency array에 빈 배열을 넣었을때와, 아예 dependency array를 선언하지 않았을 때의 차이는 무엇일까요? dependency array에 빈 배열을 넣었을때는 컴포넌트.. 2023. 4. 2. [React] 부모 컴포넌트에서 자식 컴포넌트의 함수 사용하기 자식 컴포넌트에서 부모 컴포넌트의 함수를 사용하는 것은 쉽습니다. 부모 컴포넌트의 함수를 자식 컴포넌트의 props로 전달해주면 되기 때문입니다. 하지만, 반대로 부모 컴포넌트에서 자식 컴포넌트의 함수를 사용하는 방법은 어떤 것이 있을까요? 대표적으로, useImperativeHandle과 forwardRef를 이용하는 방법이 있습니다. 부모 컴포넌트에 있는 button 태그를 클릭했을 때, 자식 컴포넌트에 있는 addNumber 함수를 호출해보려고 합니다. 이 addNumber 함수는 자식 컴포넌트 내부에 있는 number 이라는 상태 변수를 1씩 증가시킵니다. 먼저, 자식 컴포넌트입니다. // type export type addNumberHandle = { addNumber: () => void; .. 2022. 10. 9. [React] useForm 훅의 register() 메소드는 input/select 태그에서만 사용 가능할까? React Form 라이브러리는 React에서 복잡한 Form이나 양식을 만들 때, 조금 더 쉽게 코드 작성을 할 수 있게 도움을 줍니다. React Form 라이브러리는 대표적으로 formik, react-final-form, redux-form, useForm 등이 있습니다. 이 글에서는 이들 중 가장 쉽게 접할 수 있는 useForm에 대해, 그 중에서도 register() 메소드에 대해 살펴볼 것입니다. useForm은 기존의 폼에서 입력해야하는 여러가지 번거로운 작업을 줄여줍니다. form 태그 내부의 input 태그에 입력된 value 값들을 가져오려고 할 때, useForm에서는 해당 input 태그 / select 태그에 register() 메소드를 부여하고, submit 버튼을 클릭한 뒤.. 2022. 7. 15. [React] Styled Component에서의 props 자료형 정의 Styled component를 이용하여 React에서 CSS 효과를 줄 때, 항상 .jsx 파일로만 만들었는데, 이번에 처음으로 Typescript를 도입하여 .tsx 파일로 구현을 하던 도중, props의 자료형을 정의하지 않으면 빨간줄이 생기는 상황을 처음 맞닥뜨렸습니다. 앞으로 Typescript를 이용하며 자주 맞닥뜨리게 될 상황인 것 같아서 간단히 기록을 해놓으려고 합니다. 위 코드는 testComponent 라는 이름의 컴포넌트를 만든 .tsx 파일입니다. .jsx 파일이었다면, defaultColor 라는 props로 전달할때, 빨간줄이 그어지지 않겠죠. 하지만 .tsx 파일은 자료형을 엄격하게 정의해줘야 하기 때문에, 빨간줄이 그어지며 밑과 같은 메세지가 보이게 됩니다. 구글링 결과, 이.. 2022. 7. 6. 이전 1 다음
