TIL173 리액트 - useRef (22.11.18 TIL) ref 전달이란 컴포넌트를 통해 자식 중 하나에 ref 를 자동으로 전달하는 기법이다. ref 란 무엇일까? HTML 을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id 를 사용한다. 이렇게 하면 특정한 id 에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. 이렇게 HTML 을 작성할 때 이렇게 id 를 붙이는 것처럼, 리액트에서도 DOM 을 선택해 직접 접근하기 위해 ref 를 사용한다. ref 를 사용해야 할 때 (리액트에서 state 로만 해결할 수 없고, DOM 을 반드시 직접 건드려야 할 때) 포커스, 텍스트 선택 영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때 서드.. 2022. 11. 18. setTimeout 과 setInterval (22.11.17 TIL) 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링' 이라고 한다. 호출 스케줄링을 구현하는 방법은 두 가지가 있다. setTimeout 을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval 을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 둘 다 문법도 동일하고, 인수 역시 동일하나 setTimeout 이 함수를 단 한 번만 실행하는 것과는 달리, setInterval 은 함수를 주기적으로 실행하게 만든다. 1) setTimeout setTimeout 은 함수를 단 한 번만 실행한다. let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) //func|code : 실행하고.. 2022. 11. 17. 리액트 컴포넌트 (22.11.16 TIL) 강의반복과제를 하던 중 아직도 클래스 컴포넌트와 함수형 컴포넌트 선언을 헷갈려 하는 것 같아서 정리하는 글! 리액트 컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위이다. 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. 리액트에서 정의하는 컴포넌트 종류는 크게 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있다. 1. 함수형 컴포넌트 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다. function 으로 정의하고 return 문에 jsx 코드를 반환한다. 이 때 함수형 컴포넌트는 func.. 2022. 11. 16. 제어 컴포넌트 vs 비제어 컴포넌트 (22.11.15 TIL) 리액트는 두 가지 방식으로 form 입력을 처리한다. 리액트에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트 (controlled component)라고 한다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 업데이트된 값으로 다시 렌더링에 의해 입력의 유효 여부를 결정한다. 다시 렌더링 하지 않으면 form 엘리먼트는 변경되지 않은 상태로 유지된다. 비제어 컴포넌트 (uncontrolled component) 는 form 엘리먼트가 리액트 외부에서 작동하는 것처럼 작동한다. 사용자가 form 필드 (input box, dropdown 등)에 데이터를 입력하면 업데이트된 정보가 리액트에서 별도 처리할 필요 없이 엘리먼트에 반영된다. 그러나 이는 특정 필드가 특정 값을 갖.. 2022. 11. 15. SPA vs MPA (22.11.14 TIL) 멀티 페이지 애플리케이션 (Multi Page Application, MPA) 여러개의 페이지로 구성된 애플리케이션이다. MPA 는 새로운 페이지 요청이 있을 때마다 정적 리소스가 다운로드 되며 매번 전체 페이지가 다시 렌더링된다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 이 과정을 서버 사이드 렌더링(SSR)이라고 부른다. 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색 엔진이 페이지를 크롤링 하기에 적합하여 SEO (Search Engine Optimization, 검색 엔진 최적화) 관점에서는 유리하다. 하지만 새로운 페이지 요청이 있을 때마다 갱신되기 때문에 매번 새로고침이 발생되어 사용성이 좋지 않다. 또한 변경이 필요없는 부분을 포함하여 전체 .. 2022. 11. 14. 리액트 생명주기 (22.11.13 TIL) 모든 리액트 컴포넌트에는 생명주기가 존재한다. 생성 (mounting) -> 업데이트 (updating) -> 제거 (unmounting) 생명주기의 때에 따라 어떤 작업을 처리해야 하는 지 지정해줘야 불필요한 업데이트를 방지할 수 있다. 리액트의 class 컴포넌트는 라이프 사이클 메서드를 활용하고, 함수형 컴포넌트는 hook 을 사용한다. 마운트 (생성) : 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. 업데이트 : props나 state가 변경되면 렌더가 진행되며 순서대로 호출된다 언마운트 (마운트 해제) : 컴포넌트를 DOM에서 제거하는 과정이다. React Hook 리액트의 Hook 은 함수형 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into).. 2022. 11. 13. 이전 1 ··· 11 12 13 14 15 16 17 ··· 29 다음
