언어(JS,TS)/그룹스터디 (20) 썸네일형 리스트형 그룹스터디 [React : Props Drilling이란? 상태관리 라이브러리란?] 정리 프로퍼티 내리꽂기(Props Drilling)는 리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정을 의미합니다. 이 때 해당 데이터가 필요하지 않은 컴포넌트에서도 다른 컴포넌트로의 전달을 위해 거쳐야 하는 복잡성이 발생할 수 있습니다. Prop Drilling? Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 예시 import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ conte.. 그룹스터디 [React : class형에서 setState를 사용하는 이유] 정리 state는 immutable(불변성)을 유지해야하기 때문입니다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데 state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다. (예상치 못한 버그가 발생할 수 있음.) useState를 사용하는 이유와 비슷함 state란? - 렌더링 결과물에 영향을 주는 정보를 갖고 있는 일반 JavaScript 객체입니다. - (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다. setState란? - 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다. - s.. 그룹스터디 [React : React에서의 라이프사이클과 각 라이프사이클의 역할] 정리 componentDidMount() : 최초로 컴포넌트 객체가 생성될 때 한 번 수행 componentDidUpdate() : 컴포넌트의 속성 값 또는 상태값이 변경되면 호출 componentWillUnmount() : 이 컴포넌트가 소멸될 때 호출 render() : 초기에 화면에 그려줄 때, 그리고 업데이트가 될 때 호출 React 컴포넌트 생명주기 React 생명주기란 ? React 컴포넌트의 아래의 세가지 단계 초기화 단계 업데이트 단계 소멸단계 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하며 각 단계 속에서 호출되는 메서드들을 생명주기 메서드 라고 합니다 리액트는 웹에서 UI데이터가 변경되면 자동으로 컴포넌트가 업데이트되며 동적으로 화면을 그려줍니다. 제대로 된 기능을 수행하려면 이.. 그룹스터디 [React : virtual DOM란?] Virtual DOM? 정리 Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다. virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 대부분의 경우 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요. (정말 최적화를 잘하는 것이 아니라면) 또한 자동으로 정보를 관리해주기 때문에 생산성이 현저히 좋아집니다 먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. 작은 변화에도 매우 복잡한 .. 그룹스터디 [DOM: event.preventDefault()란?] event.preventDefault 란? preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다. ,,의 기본 동작을 막을 수 있습니다. 특정 이벤트가 트리거되면, 해당 이벤트에 수반되는 디폴트 액션을 취소시킵니다. 예) checkbox 요소의 디폴트 액션은 checkbox가 토글링 되는 것입니다. 만약, checkbox 요소의 click 이벤트 콜백함수에 preventDefault()를 선언하면, checkbox를 눌러도 checkbox가 토글링 되지 않습니다. 코드 preventDefault를 호출하게 되면 일반적으로 브라우저의 구현에 의해 처리되는 기존의 액션(동작)이 진행되지 않고, 결과적으로 해당 이벤트가 발생하지 않는다. 체크박스를 클릭해주세요. 체크박스: .. 그룹스터디 [DOM: 이벤트 위임(Event Delegation)이란?] 이벤트 위임(Event Delegation) 이벤트 위임은 실제 바닐라 JS로 웹 앱을 구현할 때 자주 사용하게 되는 코딩 패턴입니다. 이벤트 위임을 한 문장으로 요약해보면 ‘하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식’입니다. 코드 오늘의 할 일 학습1 학습2 var inputs = document.querySelectorAll('input'); inputs.forEach(function(input) { input.addEventListener('click', function(event) { alert('clicked'); }); }); 위 코드는 할 일 목록을 간단한 리스트 아이템으로 나타낸 코드입니다. 할 일 목록의 체크 박스를 클릭했을 때 클릭 이벤트.. 그룹스터디 [DOM: 이벤트 캡처란?] 이벤트 캡처링(Event Capturing) 캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려간다. 캡처링은 잘 사용되지는 않지만 코드로 구현하자면 DIV1 DIV2 DIV3 // 태그div를 전부 찾아서 배열 형태로 만듬 const divs = document.querySelectorAll('div'); // 현재 타겟의 클래스 이름을 콘솔에 출력 const clickEvent = (e) => { console.log(e.currentTarget.className); }; // 찾은 요소들 각각에 이벤트 넣기 // 캡쳐링 허가 divs.forEach((div) => { div.addEventListener('click', clickEvent, { capture: true }); }); .. 그룹스터디 [DOM: 이벤트 버블링이란?] 이벤트 버블링(Event Bubbling) 이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다. 버블링 예제 코드 DIV1 DIV2 DIV3 // 태그div를 전부 찾아서 배열 형태로 만듬 const divs = document.querySelectorAll("div"); // 현재 타겟의 클래스 이름을 콘솔에 출력 const clickEvent = (e) => { console.log(e.currentTarget.className); }; // 찾은 요소들 각각에 이벤트 넣기 divs.forEach((div) => { div.addEventListener(".. 이전 1 2 3 다음
