React (18) 썸네일형 리스트형 [React] - ref 알아보기 리액트로 개발을 하다보면 돔 요소에 직접 접근해야 할 때가 있다 예를 들어 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우이다 이때 ref속성값을 이용하면 자식 요소에 직접 접근할 수 있다 자식요소는 컴포넌트 일수도 있고 돔 요소일 수도 있다. useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근할 수 있다.접근하고자 하는 자식 요소의 ref 속성값에 ref 객체를 입력한다 해당 돔 요소 혹은 컴포넌트가 생성되면 ref 객체로 접근할 수 있다. ref 객체의 current 속성을 이용하면 자식 요소에 접근할 수 있다. 위 코드에서는 useEffect 훅 내 부에서 자식 요소에 접근하고 있다 그 이유는 부수 효과 함수는 컴포넌트 렌더링 결과가 돔에 반영된 후에 호출.. [React] - Context API Context API 로 데이터 전달하기 - 보통 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 속성값이 사용되는데 가꺼ㅏ운 거리에 있는 몇개의 하위 컴포넌트로 전달핧 때는 속성값으로 충분하다 하지만 많은 수의 하위 컴포넌트로 전달할 때는 속성값을 내려주는 코드를 반복적으로 작성해야 하는 문제가 있다. - 이럴 때 Context API를 사용하면 상위 컴포넌트에서 하위에 있는 모든 컴포넌트로 직접 데이터를 전달할 수 있다 이때 중간에 있는 컴포넌트는 Context Data의 존재를 몰라도 되므로 속성값을 반복해서 내려 주던 문제가 사라진다 - createContext 함수를 호출하면 Context 객체가 생성된다 createContext 함수의 구조는 다음과 같다. React.createConte.. [React] - Custom Hook * 훅 직접 만들기 - 리액트가 제공하는 훅을 이용해서 custom hook 을 만들 수 있다 그리고 커스텀 훅을 이용해서 또 다른 custom Hook을 만들수도 있다 - 훅을 직접 만들어서 사용하면 쉽게 로직을 재사용할 수 있다. - 리액트의 내장 훅 처럼 커스텀 훅의 이름은 use로 시작하는 것이 좋다 그러면 코드 가독성이 좋아지고 여러 리액트 개발 도구의 도움도 쉽게 받을 수 있다. - useState와 useEffect 훅을 이용해서 커스텀 훅을 만들 수 있다 이렇게 레고 블록처럼 기존 훅을 이용해서 새로운 훅을 만들 수 있다는 점이 리액트의 매력이다. - 커스텀 훅도 리액트에서 제공되는 내장 훅과 마찬가지로 단순히 함수를 호출하는 방식으로 간단하게 사용할 수 있다 - 커스텀 훅은 이렇게 내부 .. [React] - useState 파헤치기 * 배치로 처리되는 상탯값 변경 함수 - useState 훅을 이용하면 컴포넌트에 상탯값을 추가할 수 있다> - useState 훅이 반환하는 배열의 두번째 요소는 상태값 변경 함수다 리액트는 상탯값 변경 함수가 호출되면 해당 컴포넌트를 다시 그린다 그 과정에서 자식 컴포넌트도 같이 렌더링된다. - 리액트는 가능하다면 상탯값 변경을 배치로 처리한다 - 배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다. 위 코드에서 count 상탯값을 두번 증가시키려고 했다 하지만 의도와 달리 1만큼 증가한다 이는 상탯값 변경 함수가 비동기로 동작하기 때문이다 리액트는 효율적으로 렌더링하기 위해 여러개의 상탯값 변경 요청을 배치로 처리한다 따라서 onClick.. [React] - Portal * Portal - Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM노드로 자식을 렌더링 하는 방법이다. - 쉽게 설명하면 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때 UI를 어디에 렌더링 시킬지 DOM을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능이다. - 기능은 리액트 V16에서 도입되었다 기존의 리액트에서 컴포넌트를 렌더링 할 대 children은 부모 컴포넌트의 DOM 내부에 랜더링 되어야 했다 Portal을 사용하면 DOM의 계층 구조 시스템에 종속되지 않으면서 컴포넌트를 랜더링 할 수 있다 -Portal을 이용하면 불필요한 스타일을 상속받는 문제를 해결할 수도 있고 그외에도 엘리먼트의 레이어 위치를 관리하는 z-index 스타일을 관리할때 유용하.. [React] - Axios 1. Axios React 에서는 axios를 사용해서 GET , PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다 GET은 데이터 조회 POST는 데이터 등록 PUT은 데이터 수정 DELETE는 데이터 제거의 의미를 갖고 있다 . 이외에도 HEAD, PATCH 와 같은 메서드들도 존재한다 2. Axios 기본 사용법 우선 yarn 또는 npm, npx로 axios패키지를 다운받고 위와 같이 사용하시면 됩니다 get은 데이터 조회를 하는 메서드이므로 저렇게만 적어도 상관없는데 만약 POST메서드를 사용하고 싶으시다면 다음과 같이 두번째 파라미터에 등록하고자 하는 정보를 넣을 수 있습니다 2. Axios 응답 스키마 axios는 요청에 따른 응답 결과를 받는데 이를 응답 스키마라고 .. React.js - useState 1. useState 리액트 16.8 이전 버젼에서는 함수형 컴포넌트에서 state를 사용할 수 없었다 하지만 16.8버젼 이후부터는 useState라는 함수를 이용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었다 물론 useState와 클래스형 컴포넌트에서 state사용법은 약간씩 다르고 useState를 사용과정에서 Hooks라는 것을 사용하게 된다 2. 구조 분해 할당 useState를 사용하기 전 구조분해 할당이라는 것을 알아야 하는데 이런식이다 ex) const array = [1, 2]; const [one, two] = array; 3. useState 사용하기 useState에서는 반드시 객체가 아니어도 상관이 없다 값의 형태는 자유이다 숫자일 수도 문자열 일수도 객체일 수도 .. [React] - 컴포넌트(2) props : props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. 1. 컴포넌트를 사용할 때 props 값 지정하기 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링 하도록 설정한다 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용 할 수 있다 props를 렌더링 할 때에는 JSX내부에서 { } 감싸주면 된다 App.js 에서 props값을 지정해 준다 다음과 같은 결과 값이 나온다 2. props 기본값 설정 : defaultProps App.js에서 name 값을 삭제하고 Mycomponent.js에서 다음과 같이 작성한다 3... 이전 1 2 3 다음
