akjfal

Effect Hook 사용하기 💡 useEffect는 class에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 방식이라고 생각하면 된다. React에는 두 종류의 side effects가 존재하는데 clean-up이 필요한 것과 필요 없는 것 두가지가 있다. clean-up이 필요 없는 Effects class형에서 어떠한 데이터를 업데이트 하기 위해서는 컴포넌트가 방금 마운트 되엇는지(componentDidMount), 업데이트되었는지(componentDidUpdate)에 상관없이 모든 동작을 수행해줘야 할 수도 있습니다. class Example extends React.Component { constructor(props) {..

Hook API 참고서 기본 Hook useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 처음 렌더링 하는 동안, 반환된 state와 첫번째 전달된 인자의 값은 같습니다. setState는 리렌더링시에도 변하지 않아, useEffect와 useCallback의 의존성목록에 추가하지 않아도 됩니다. useEffect useEffect(didUpdate) 명령형 또는 어떤 effect를 발생시키는 함수를 인자로 받습니다. 화면에서 제거될 때 setTimeout과 같은 것들을 제거하기 위해서는 clean-up함수를 반환하면 됩니다. 조건부 발생시키기 useEffect(()=>{}, []) useEffec..

Hook의 개요 16.8부터 새로 추가된 기능입니다. class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. State Hook function Example(){ const [count, setCount] = useState(0); function onClick = () => { setCount(count+1); } } useState가 Hook입니다. Hook을 사용해 함수 컴포넌트 안에 state를 추가했는데 인느 다시 렌더링되어도 그대로 유지됩니다. this.state와 비슷하지만 이전 state와 새로운 state를 합치지 않는다는 점이 차이점입니다. Hook이란 함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수입니다...

합성 이벤트(SyntheticEvent) 개요 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하기 처리하기위해 SyntheticEvent 객체를 전달받습니다. 만약 브라우저의 고유 이벤트가 필요하다면 nativeEvent를 참조하고, 합성 이벤트는 고유 이벤트에 직접 대응되지 않고, 서로 다른 이벤트입니다. boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() boolean isDefaultPrevented() void stopPropagation() boole..

합성 이벤트(SyntheticEvent) 개요 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하기 처리하기위해 SyntheticEvent 객체를 전달받습니다. 만약 브라우저의 고유 이벤트가 필요하다면 nativeEvent를 참조하고, 합성 이벤트는 고유 이벤트에 직접 대응되지 않고, 서로 다른 이벤트입니다. boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() boolean isDefaultPrevented() void stopPropagation() boole..

DOM 엘리먼트 ※ 공식 사이트에 한글로 번역이 이미 되어있으니 원문을 보시는 것을 추천드립니다. React는 성능 및 호환성을 위해 브라우저 독립적인 DOM 시스템을 구현합니다. React는 대부분의 속성에서 카멜 케이스를 사용하지만 aria-*와 data-*는 예외입니다. Attribute의 차이 React와 HTML사이에는 다르게 작동하는 여러가지의 어트리뷰트들이 있습니다. checked 이 checkbox나 radio type 일 때 사용합니다. → 제어 컴포넌트에서 유용 defaultChecked는 컴포넌트가 처음 마운트 될 때 선택여부 설정 → 비제어 컴포넌트에서 사용 className CSS class를 사용하려면 className attribute를 사용하세요. 모든 일반적인 DOM 및 S..

ReactDOMServer ReactDOMServer객체를 통해 컴포넌트를 정적 마크업으로 렌더링 할 수 있습니다. Reference renderToPipeableStream() ReactDOMServer.renderToPipeableStream(element, options) 초기 html을 렌더링합니다. 인라인 ', { status: 500, headers: {'Content-Type': 'text/html'} }); ); renderToStaticNodeStream() ReactDOMServer.renderToStaticNodeStream(element) data-reactroot와 같이 React에서 내부적으로 사용하는 추가적인 DOM attribute를 만들지 않습니다. 여분의 attribute..

ReactDOMClient ※ 공식 사이트에 한글로 번역이 되어있으니 원문을 보시는 것을 추천드립니다. createRoot() DOM에 root를 추가할 때 사용합니다. 2가지 옵션이 존재합니다. onRecoverableError: error에서 자동적으로 회복하기 위해 호출하는 콜백함수입니다. identifierPrefix: React.useId에서 만들어지는 id입니다. multi root에서 충돌을 방지하기 위해 사용합니다. 서버와 같은 prefix를 사용해야만 합니다. hydrateRoot() createRoot와 같지만 이는 ReactDOMServer에서 동작합니다. createRoot와 동일한 옵션을 사용합니다.