Delia's Note

https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. mui.com material 은 구글에서 제안한 UI 가이드라인으로써 많은 개발자들이 채택하는 UI 다. 이를 react 에 적용한 UI kit 가 material UI 이다. 매우 깔끔하고 업데이트도 잘 되는 모듈이라서 아마도 React 오픈소스 UI 에서는 선호도가 제일 높지 않을까 생각한다. React 업데이트에 발맞춰 업데이..

notistack 이라는 모듈인데 material ui 에서 채택하고 있는 써드파티 모듈이다. 디자인도 깔끔하고 커스터마이징도 쉬워서 매우 선호하는 모듈이다. Snackbar React component - Material-UI Snackbars provide brief messages about app processes. The component is also known as a toast. material-ui.com 다음과 같이 웹사이트에 안드로이드의 스낵바 같은 메시지를 디스플레이 할 수 있다. 사용하는 아이콘도 바꿀수 있고 각 컬러를 설정가능하고, 디스플레이 할수 있는 갯수, 위치 등도 수정 가능하고, 추가로 버튼같은 액션도 넣을 수 있다. SnackbarProvider 로 앱을 감싸주면 하위 ..

Promise 는 자바스크립트에서는 없어서는 안될 덕목? 이다. Promise 없는 자바스크립트는 상상할수없어이제......ㅠㅠ React.useEffect 안에서는 await 을 쓸수없다. 만약당신이 await 을 썼다면 리액트가 바로 당신을 혼줄 내줄것이야 - 는 개소리고 콘솔에 경고문을 보게된다. React.useEffect(async () => { // 이렇게 쓰면 안되고 const result = await axios( 'https://something.com/api', ); setData(result.data); }, []); 그렇다면 어떻게 사용해야 할까? promise 부분을 별도의 함수로 만들어서 호출한다. React.useEffect(() => { fetchData(); }, []); ..

Function 컴포넌트에서 useState 를 사용하고있고, setTimeout 함수안에서 특정 state 값을 체크해야 하는 상황인데, 이상하게도 분명히 setTimeout 함수가 실행되기 전 state 를 변경해주었는데도 setTimeout 호출 함수는 setTimeout 세팅 시점의 값을 가져오고 있었다. const [status, setStatus] = React.useState('ready'); function onClick() { setTimeout(() => { console.log('after timeout: ', status); }, 1000); setStatus('started'); } console.log('rendering :', status); return Click; 나의 경우..

https://reactjs.org/docs/hooks-intro.html Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org Hooks 는 리액트의 function 컴포넌트에서 사용할 수 있다. 간단히 사용방법을 알아보자. React.useState class 컴포넌트에서 사용하는 state 와 setState 대신 사용하는 것은 React.useState 이다. 간단한 사용방법을 알아보자. const [count, setCount] = React.useState(0); useState() 괄호안에 들어가는 값은 디폴드 값이다. 위의 예제는 count 값으로 0 을 기본 세팅하고 count 값을 수..