우리는 Calisthenics 입니다!

React에서 컴포넌트를 스타일링해주는 방법은 여러 가지가 있습니다. 1. css파일을 생성해서 import해서 className으로 적용한 스타일링 방식 2. 1번의 방법으로는 global로 css가 적용이 되므로, module 방식을 이용한 스타일링 방식 3. styled-components를 이용한 스타일링 4. React UI Framework인 element-UI를 기본적으로 활용하고, 제공되는 컴포넌트를 makeStyles()를 활용하여 커스터마이징 해주는 스타일링 방식 이번 프로젝트에서는 3번과 4번을 골고루 사용할 예정입니다 (*추후 해당 방법 선택 이유 포스팅 예정) 오늘은 3번 방식인 styled-components를 활용해서 React 컴포넌트를 스타일링해주는 방식을 포스팅하겠습니다...

이번 포스트는 React로 프로젝트를 할 때 자주 쓰이는 폴더와 이에 대한 설명을 해보려고 합니다. *기본적으로, 이번 프로젝트는 react-redux-toolkit 공식홈페이지에서 strongly recommended하는 폴더 구조로 이에 맞게 폴더 구조를 설정해보았습니다. 1. public React는 가상 DOM을 활용하여 변경된 부분만 Rendering 해주는 것이 핵심인 Library입니다. 이를 위해서는 실제로 DOM이 필요한데, 이는 index.html 파일로 public 폴더에 위치하고 있습니다. 아래부터는 src 폴더 내부의 폴더들이므로, 해당 내용 참고 하여 읽어주시면 감사하겠습니다😀 src 폴더 -> 대부분의 개발이 이루어지는 폴더로, 대부분의 코드는 해당 폴더에 작성이 되는 곳 2...

React에 대한 기본적인 문법과 팁에 대해서 정리해보았습니다😀😀 state를 변경하려고 하면 무조건 setState를 사용해서 변경해주어야함 이유: state 값에 변경이 생긴다면 이 값을 토대로 render()를 호출해줘야 하는데 setState를 사용하면 React에서 자동으로 render function을 호출해줌 setState를 사용할 때 state안에 default값들을 선언할 필요는 없다. class App extends React.Component{ state = { isLoading: false, }; componentDidMount() { setTimeout(() => { this.setState({ isLoading:true, book:true }) }, 3000); } state가..