React 완벽 가이드21 Side Effects & useEffect Side Effects & useEffect Side Effects Side Effects : 제대로 동작하기 위해서 꼭 필요하지만, 현재의 컴포넌트 렌더링에 직접적이고, 즉각적인 영향을 미치지는 않는 tasks(일) React에서는 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과이다. React에서의 순수 함수(Pure Function) vs Side Effects 순수 함수 대부분의 React 컴포넌트는 순수함수이다. 함수의 리턴 값이 동일한 인수(argument)에 대해 동일하다. Side Effect가 없다. (외부의 상태를 변경하지 않는다.) Side Effect 함수 내의 구현 내용이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect가 있다고 일컫는다.. 2024. 3. 29. Context API & useReducer Context API & useReducer Props Drilling 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 property를 내려주는 것 중간 컴포넌트는 원하는 자식 컴포넌트에게 property를 전달하기 위해 필요하다. 그러나, 해당 값을 직접 사용하지 않는 경우에도 property를 받고 전달해야 한다. 장점 명시적인 값의 사용 값 추적이 편해진다. 코드 변경 파악이 편해진다. 단점 property 데이터 형식 변경의 불편 중간 컴포넌트에 불필요한 property 전달 누락된 property 파악 어려움 property 이름 변경 추적의 어려움 해결법 Context API Redux 또는 다른 상태 관리 라이브러리 Custom Hooks Render Prop.. 2024. 3. 29. Refs & Portals Refs & Portals Refs 어떻게 Refs를 사용하여 상태를 간소화할 수 있나? React에서 Refs는 State와 같이 값이다. useRef 훅을 불러옴으로써 사용가능하다. 다른 훅 함수들과 마찬가지로 컴포넌트 함수나 커스텀 훅 내에서만 호출할 수 있다. useRef는 바로 참조로 JSX 요소들과 연결될 수 있다. ref 속성은 모든 리액트 컴포넌트들에서 사용이 가능하다. useRef를 통해 생성된 참조 값들을 위해 우선은 current 속성에 접근해야 한다. useRef로부터 받는 이 참조 값들은 항상 자바스크립트 객체이며, 항상 current 속성을 가지고 있다. useRef 는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니.. 2024. 3. 29. React - the complete guide 06: CSS with React CSS with React Vanilla CSS 장점 jsx에서 css 코드 분리 내가 작업하고 있는 jsx 코드를 다른 사람이 스타일링할 수 있다.(충돌방지 가능) 단점 다른 컴포넌트 간에 스타일 충돌이 발생할 수 있다. 클래스명을 동적으로 부여할 때, 조건이 여러 개일 경우에는 삼항 연산자를 여러 번 중첩해야 하므로 가독성이 떨어질 수 있다.(삼항연산자 권장되는 협업시) InLine Style style 객체를 키와 값으로 전달하는 방식 My Style 장점 추가하기 쉽다. 추가하는 요소에만 영향을 미치고 다른 요소에는 영향을 미치지 않는다. 단점 모든 요소를 개별적으로 스타일해야한다. style 속성에 직접 객체를 생성하는 방식은 일부 스타일을 동적으로 관리하기 어렵다. 특히, 여러 스타일 속성이 .. 2024. 3. 29. React 핵심 이론 2(React Core 2) React Core 2 동적 호출 관련 분명 앞서 정적으로 만든 것은 디폴트 값이 제대로 발생하는데, 동적인 값은 제대로 호출이 안되어서 뭐가 문제지 싶었다. import LableAndInput from "./LableAndInput"; export default function UserInput({ myVal, handleChangeValue }) { function handleChange(whatIWantToChagne, e) { e.preventDefault(); handleChangeValue(whatIWantToChagne, e.target.value); } return ( initial-investment handleChange("initialInvestment", e)} required /.. 2024. 3. 29. React 핵심 이론(React Core) React Core React.createElement React가 요소들 제어한다. JSX JSX는 무조건 하나의 요소만 반환해야 한다. 대책으로 빈 태그로 모두 감싼다. return ( ) Fragment도 가능하다. (이게 원조) return ( ) 컴포넌트 분리 컴포넌트를 잘게 쪼개서 리렌더링을 최적화시킴 Feature와 State로 컴포넌트 분리 import Header from "./components/Header"; import Examples from "./components/Examples"; import CoreConcepts from "./components/CoreConcepts"; const App = () => { return ( Time to get started! ); }; .. 2024. 3. 29. 이전 1 2 3 4 다음