본문 바로가기

개발 공부/React, React Redux5

State state 사전적 정의 (명사) 상태 React에서는 props와 연결 지어 한 가지 예를 들면, props은 상위 Component로부터 나옵니다. 하지만 만약에 상위 Component에 존재하지 않지만 지금 사용하고 있는 Component에 필요한 data가 있다면 어떻게 해야 할까? 이것을 위해 사용하는 것이 바로 state이다. 또 상위 Ceompoent의 state값을 하위 Component의 props값으로 보내는 것도 가능하다. constructor(props) 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React Component에는 Constructor를 구현하지 않아도 됩니다. React Component의 constructor는 해당 Component가 마운트 .. 2021. 6. 21.
Component와 Props Component 사전적 정의 명사 (구성) 요소, 부품 React React에서 구성 요소는 앱의 일부를 렌더링하는 재사용 가능한 모듈입니다. 이러한 부분은 크거나 작을 수 있지만 대개 명확하게 정의됩니다. 단일한 분명한 목적을 위해 사용됩니다. 예시 function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } ReactDOM.render( , document.getElementById('root') ); 위의 Welcome Component는 name을 props로 받고 해당 이름과 함께 Hello, {props.name}을 나타낸다. 만약에 Component없는 상태에서 인사할 인원이 많고 매번 명단이 바.. 2021. 6. 21.
비동기 처리 (async, await) 문제 내가 Drello의 Board page를 설계하면서 겪었던 문제 중 하나는 바로 Board page에 접속하면 전에 생성된 Board가 뜨지 않았다. 원인 Python을 주로 사용한 내가 Drello의 Frontend를 React로 설계하면서 JavaScript를 본격적으로 사용하게 되었다. 그중 나를 가장 애먹게 만든 개념이 바로 비동기, 동기 처리이다. Python은 코드가 짜진 순으로, 즉 위에서부터 아래로 순차적으로 실행된다. 큰 데이터를 처리하는 등 실행시간이 오래 걸리는 코드가 있더라도 그 뒤에 있는 코드가 먼저 실행되는 일이 없다. 그래서 나는 모든 코드는 순차적으로 실행된다라는 고정관념이 있었다. 이로 인해 나는 위의 서술한 문제가 대체 왜 발생했는지 이해를 할 수 없었다. 그리고 J.. 2021. 6. 17.
semantic UI 설치 실패 - Creating src/theme.config (LESS config) C:\Users\miladild\semantic\src\theme.config 발생과정 nvm을 설치하고 node.js를 다운그레이드 한 뒤 semantic UI를 설치했지만 Creating src/theme.config (LESS config) C:\Users\miladild\semantic\src\theme.config 단계에서 멈추고 더 이상 진행되지 않았다. 오류 node.js 특정 버전에서는 semantic UI를 설치할 수 없다. 해결법 node.js 버전을 특정 버전으로 다운그레이드해야 해결할 수 있었다. 처음 다운그레이드 한 버전은 10.24.1였고 이번에 다운그레이드 한 버전은 10.1.0이다. 해당 버전에서는 원활하게 semantic UI를 설치할 수 있었다. 출처 https://github.com/Semantic-Org/Semantic-UI/issues/6641.. 2021. 6. 3.