전체 글56 [React] 이벤트 처리하기_1 Event Handler in React리액트는 jsx에 이벤트 핸들러를 등록할 수 있게 해 준다. 이벤트 핸들러는 클릭이나 마우스오버, 값 입력 등에 대해 반응할 수 있게 만드는 함수이다. //button 태그에 alert 이벤트를 등록해주는 함수 handleClickexport default function Button() { function handleClick() { alert('You clicked me!'); } return ( Click me );}일반적으로 컴포넌트 내부에서 정의해서 사용하며 이름을 handle로 시작하는 단어로 정하는 것이 컨벤션에 더 적합하다. 아래와 같이 jsx 내부에서 인라인 방식으로 이벤트 핸들러를 정의할 수도 있다.//화살표 .. 2023. 4. 24. [React] React Hook_useRef useRef렌더링을 유발하지 않는 값을 저장하는 변수이다. 본질적으로는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다고 생각하면 된다.값을 참조하거나DOM을 조작하거나참조값의 재생산을 방지하는역할을 한다. 특징들을 종합적으로 살펴보았을 때 참조 값이 갱신되어도 컴포넌트가 리렌더링 되거나 갱신을 알 수 있는 어떤 동작이 이루어지지 않는다는 것을 알 수 있다.function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); .. 2023. 4. 12. [React] React Hook _ useEffect useEffect컴포넌트의 생에 주기에 맞춰 데이터를 받아오거나 DOM을 변경하는 등의 코드를 작성할 수 있는 함수이다. 클래스 생명 주기 메서드 중 componentDidMount와 compomentDidUpdate, componentWillUnmount가 합쳐진 것을 생각하면 된다. 첫 번째 인자로 수행할 코드, 데이터 구독 등의 setup이 들어가고, 두 번째 인자는 의존성 배열로 필수값은 아니지만 어떤 변수가 변경될 때만 effect가 필요하다면 의존성 배열에 변수를 추가하면 된다.useEffect(effect, [dependencies])useEffect(effect) : 렌더링 시마다 setup이 실행된다.useEffect(effect, []) : 컴포넌트가 최초 렌더링 되었을 때만 실행된다... 2023. 3. 21. [React] React Hook _ useState 리액트의 Hook이란?함수형 컴포넌트 내에서 state와 컴포넌트의 생명주기를 연동할 수 있게 해주는 자바스크립트 함수이다. 클래스 없이 리액트를 사용할 수 있게 해 준다. Hook 사용 규칙컴포넌트 최상단에서만 호출한다. 반복문, 조건문, 중첩 함수 내에서 호출하지 않는다.리액트 컴포넌트 함수 내에서만 호출해야 한다. 순수 자바스크립트 함수 내에서 호출하지 않는다.eslint-plugin-react-hooks라는 플러그인을 설치하면 규칙에 맞는지 자동으로 검사해 준다. CRA로 앱을 구성하였다면 해당 플러그인이 이미 포함되어 있다. useState컴포넌트 내에서 상태 변수를 관리하는 함수다. 상태 변수와 상태를 갱신하는 함수를 반환하며, useState에 전달된 첫 번째 인자(init)가 초기 상태.. 2023. 3. 9. 비전곰VisionBear 스터디 프로젝트 - 드디어 배포! 북극곰 프로젝트 드디어 배포까지 끝났다!코드의 'ㅋ'도 모르는 사람들끼리 모여 처음부터 끝까지 얼레벌레 살 붙여가며 리액트로 1차 작업을 하고,또, 타입의 'ㅌ'도 모르는 상태에서 타입스크립트 꾸역꾸역 적용해 가며 리팩토링에 추가 기능까지 넣어서 완성✌ 프로젝트 완성한 것도 정말 기쁘지만, 이렇게 좋은 인연들을 만나게 되어 두배로 기쁘다.처음 독학을 시작했을 때, 힘들고 어려워도 어찌 해결할 줄도 모르고, 어디 털어놓을 곳도 없었는데.. 이제 개발에 대해서 공감해 줄 친구들이 있어 너무 든든하다. 리팩토링 하면서 새로 알게 된 것들도 있어 차차 글로 정리해야 할 것 같다. 개인적으로 제일 큰 소득은 react-query, useInfiniteQuery를 사용해 본 경험과 redux/toolkit에 대해 .. 2023. 2. 27. 이전 1 2 3 4 5 6 ··· 12 다음
