리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 기반의 라이브러리입니다. 리액트는 순수 자바스크립트와 JSX를 사용하기 때문에 자바스크립트는 알아야 합니다. 기본적인 문법들을 모르신다면 자바스크립트 게시글을 참고해주세요! 👇 javascript #1. 변수, 자료형 자바스크립트가 대세라고 했던가... 대학 재학 4년째에 처음 자바스크립트를 접해봅니다ㅎㅎ.. 제로초로 공부하라고 추천을 받아서 제로초로 자바스크립트 기본기를 다졌습니다! 복습이나 할 dvlpseo.tistory.com 주요 개념 정리 Part.1 feat. 공식문서 JSX - JavaScript + XML 1. JSX JSX는 javascript 코드에 xml을 추가하여 확장한 문법이다. 리액트의 가장 작은 단위의자 화면에 표시할 내용을..

표로 데이터를 보여줄 일이 있어 처음에는 MUI (Material UI)를 사용해서 datagrid 테이블을 만들고 아래에 page를 나타내주었다. 근데 생각해보니까 데이터의 양이 방대해져서 페이지의 크기가 커졌는데, 찾고싶은 데이터가 만약 맨 뒤쪽에 있다면...?...?>..? 저런식으로 했을 때 일일이 클릭해서 뒤로 가야하기 때문에 사용자 입장에서 불편할 것 같았다. 그래서 페이지를 나타내주는 부분을 좀 더 편리하게 다시 수정해보기로했다. 기존 코드를 보면 pageSize 와 rowCount로 개수를 맞춰주고 onPageChange를 사용하여 페이지 수를 맞춰주었다. 사용자가 더 간편하게 테이블을 사용할 수 있도록 이런식으로 만들어 주었다. 저렇게 페이지를 구현하는걸 Pagination이라고 하는데 ..

저번 게시글에 리덕스에 관하여 올렸습니다! 이론적으로만 보면 이해가 잘 안될것 같아 리덕스의 흐름에 대해 더 자세한 예시를 가져왔습니다. Redux Flow 초기 상태 - store에서 reducer를 호출하고 리턴 값을 초기로 상태로 저장한다. - UI가 최초 렌더링 될 때, UI 컴포넌트는 store의 state에 접근하여 렌더링에 활용한다. 그리고 그 state가 업데이트되는 것을 subscribe 한다. 흐름 순서 Deposit $10 버튼을 클릭 -> dispatch 함수를 실행시켜 action을 일으킴 -> store에선 이전 state와 현재의 action으로 reducer함수를 실행, 리턴된 값을 새로운 state로 저장한다. -> store에서 store를 subscribe하고 있던 UI..