일안하고블로그

React 생명주기(LifeCycle) 리액트에서 정말 중요하지만 정리가 필요한 것이 리액트 생명주기입니다. 매번 할때 마다 구글링을 하고 정리가안되어 헤깔렸던 리액트 생명주기를 한번에 정리해 보겠습니다. 컴포넌트 초기생성컴포넌트 업데이트컴포넌트 제거 컴포넌트 생성과정 See the Pen [React LifeCycle] 컴포넌트초기생성 by 최대한 (@sheldhe) on CodePen. 위의 예시에서 Result 버튼을 누르시고 console을 확인하시면 테스트 결과를 확인 할 수 있습니다. 컴포넌트 생성과정 constructor -> componentWillMount -> render -> componentDidMount 컴포넌트의 실행과정을 살펴 보겠습니다. constructor : 컴포넌트 생성..

React PropTypes 리액트 TypeChecking PropTypes를 정리하기위해 사이트를 참조하였습니다.리액트 앱이 커지면서 여러 유형 검사를 통해 많든 버그들을 발견 할 수 있게되었습니다. 일부 응용 프로그램인 TypeScript나 Flow와 같은 자바스크립트 확장 응용 프로그램으로도 검사를 할 수 있습니다. 하지만, 리액트 자체적으로도 TypeChecking 기능을 내장하고 있습니다. 또한 리액트 PropTypes를 통해 버그만 잡는 것이 아닌 가독성향상 및 커스텀화로 중요성이 커지고 있습니다. 지금부터 예제를 통해서 하나씩 설명해 보도록 하겠습니다. 알아두어야 하는 내용React.Proptypes는 15.5버전 부터 다른패키지로 옮겼습니다.prop-types 라이브러리를 사용 할 것입니다..

React fetch 작업파일은 여기를 클릭해주세요.리액트에서 데이터를 받아올때는 어떻게 받을까? 라는 생각을 해본 적이 있을거에요.그냥 단순히 Jquery 라이브러리를 불러서 사용을 해야하는 것인지 아니면, 다른방법이 있는지 고민을 하다가 처음 알게된 라이브러리는 fetch 입니다. 하지만 이것도 쉽지 않았습니다. 왜냐면 여러개를 테스트 해보고 싶은데 마땅히 테스트 해볼것도없고..유튜브를 보면서 정리를 해보았습니다. 리액트에서 쓰는 API Citent REST API는 fetch / SuperAgent / axios 가 있습니다.(다른 방법도 더찾아보면 있을거에요) 여기서 제가 선택해서 사용 할 것은 fetch(native) 와 axios입니다. fetch는 ajax역할만 하는 라이브러리인데, 사용법은..

평소에 CSS에 대한 것들이나 구글링 하거나 CodePen을 사용하다 보면 항상 SCSS 라는 단어와 Sass라는 단어를 자주 보게 됩니다. CSS에 관련된 것인데 문법을 보니까 어려울것같고, 해서 미뤄왔지만 이제 정리를 해야 할때가 왔습니다. 저는 리액트 프로젝트 스타일링은 SCSS로 할 것이기 때문에 SCSS를 쓰면 어떻게 편한지 왜좋은지를 알아야합니다. 우선, Keyword 부터 적어 보겠습니다. CSS PREPROCESSORSASSSCSSCSS PREPROCESSOR 한글로 해석하면 CSS 전처리기라고 하는데 말이 너무 어렵습니다. 쉽게, CSS가 동작을 하기전에 사용하는 기능입니다. 리액트를 하면서 주로 사용하는 CSS 전처리기는 Sass/SCSSpostCSSLessStylus 이렇게 있어요. ..

Redux 작업 파일 다운로드는 여기를 클릭해주세요.FaceBook 팀이 만든 Javascript 라이브러리입니다. React만 사용해도 어플리케이션을 개발 할 수 있으나, 어플리케이션의 규모가 커지고 복잡해지면서, state관리가 복잡해 졌습니다. Redux는 복잡한 state관리를 단순하게 처리할 수 있게 도와줍니다. Redux의 3원칙- 지금 꼭 이해할 필요는 없어요. 1. 모든 상태는 하나의 Store로 구성2. 상태는 읽기전용이다.3. 변화 함수는 순수 함수로 작성해야한다. 1. Flux 와 차이점인데, 쉽게 한개의 Store라는 것을 관리한다고 보면 됩니다. 2. 상태(State)를 변경하려면 action이라는 객체를 전달하는 방법 뿐입니다. action 개념은 하단에서 예시를 보면서 이해하면..