akjfal

Error Boundaries 에러 경계(Error Boundaries) – React A JavaScript library for building user interfaces ko.reactjs.org 과거 자바스크립트 에러가 React의 내부를 훼손하고, 암호화 에러를 뱉어내서 문제가 되었습니다. Error Boundaries의 소개 UI의 일부분 에러가 전체 애플리케이션을 중단시켜서는 안되기 때문에 React 16에서부터 Error Boundary라는 개념을 도입했습니다. 단 아래 경우에는 에러를 포착하지 않습니다. 이벤트 핸들러 비동기적 코드 서버사이드 렌더링 자식이 아닌 error boundaries 자체에서 발생하는 에러 ... Error boundary배치 위치 개발자가 결정할 사항인데, 전..

Context Context – React A JavaScript library for building user interfaces ko.reactjs.org context를 사용하면 props로 상태를 일일이 넘길 필요 없이 데이터를 트리에 제공할 수 있습니다. 언제 Context를 써야 할까 기존에 React에서 데이터를 전역적으로 사용하기 위해서는 Redux나 Mobx와 같은 외부 라이브러리에 의존해야했습니다. 하지만 이를 내부적으로 해결하기 위해 고안된 방법입니다. import React from 'react'; function ThemeButton(props){ const {theme} = props; return ( 버튼 ) } function App() { return ( ); } expor..

코드 분할 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 번들링 코드들이 import 로 엮여있는 경우 이를 webpack등 툴을 통해 묶어줍니다. 코드 분할 앱의 크기가 커지면 번들도 커지기 때문에 로드가 오래걸릴 수 있습니다. 이를 통해 초기 로딩 비용을 줄일 수 있습니다. import() 동적 import()문을 통해 코드를 분할하는 것이 가장 좋습니다. import("./math").then(math => { console.log(...)})); webpack이 해당 구문을 만나게 되면 코드를 분할합니다. 또한 Next.js도 이를 지원합니다. 만약 Babel을 사용한다면 동적 import를 다른 것으로..

접근성 접근성 – React A JavaScript library for building user interfaces ko.reactjs.org 별칭 : a11y 표준 및 지침 WCAG(Web Content Accessibility Guidelines) 접근성을 갖춘 웹사이트를 만드는데 필요한 지침을 제공합니다. WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 접근성을 갖춘 javascript 위젯을 만드는데 필요한 기술입니다. → React에서는 aria-* 속성을 통해 제공합니다. → 카멜케이스로 제공되는 다른 속성과 달리 케밥 케이스로 작성되어야 합니다.. 시멘틱 HTML map등의 내부에서 코드를 동작시키..

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

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

Effect Hook 사용하기 Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org useEffect는 class에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 방식이라고 생각하면 된다. React에는 두 종류의 side effects가 존재하는데 clean-up이 필요한 것과 필요 없는 것 두가지가 있다. clean-up이 필요 없는 Effects class형에서 어떠한 데이터를 업데이트 하기 위해서는 컴포넌트가 방금 마운트 되엇는지(componentDidMount), 업데이트되었는지(componentDidUpdat..