DEVLOG

리액트를 실행시킨 후 자바스크립트가 로딩이 되면서 JSX파일이 보이기 시작한다 이때 돌아가는 라이프사이클을 알게 되면 컴포넌트 업데이트 관련하여 추후에 유지보수 때 큰 효과를 볼 수 있으므로 그 주기에 대해서 꼭 공부해야한다! 예를들어.. 컴포넌트가 렌더링 된 직후 setState를 하고 싶다면 어디다가 그 로직을 작성해야 할까요? 컴포넌트가 업데이트 된 직후 어떤 부분이 업데이트 되었는지 체크하고 싶다면 어디서 그 로직을 작성해야 할까요? LifeCycle Lifecycle 은 크게 3가지 부분이 있다. Mounting Updating Unmounting 그리고 각 부분마다 호출되는 다양한 API들이 있다. 이 API는 컴포넌트가 브라우저에서 나타날때, 사라질때, 업데이트될 때 호출되는 API이다. 중..

props, state.... 리액트 공부할때마다 앞부분이라 꼭 한번씩 보게되기 때문에 거의 4번째 보는 놈들이지만 아직도 설명하라면 잘 못하겠다... 잘 정리해봐야징.. Props와 State는 리액트에서 데이터를 다룰 때 사용하는 개념으로 정말정말 중요하고 정말정말 헷갈리는 개념이다 꼭꼭 잘 정리해보자 Props properties의 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(주로 App컴포넌트)에서 설정할 수 있다. 단! props는 state처럼 변경할 수는 없다. index.js에서 message라는 변수를 App.js가 받아서 props로 사용할 수 있게 하는 코드이다. 이처럼 부모(여기서 부모는 index.js)에게 상속..

React 시작하기 리액트도 CDN을 불러와서 사용할 수 도 있지만! 실제로는 이렇게 CDN을 사용하는 사람이 없다.... 여러가지 라이브러리를 동시에 사용하기 때문에 CDN으로 리액트를 사용하려면 리액트를 100% 활용할 수 없기 때문 So.. 많은 사람들이 리액트작업시에 webpack이나 parcel같은 번들러를 이용해서 작업을 한다. 모옹오든 모듈이나 여러가지 라이브러리를 동시에 합쳐 하나의 .js파일로 내보내는 것임!! 올... 또 리액트 파일은 JSX문법으로 작성되거나 최신 js문법으로 작성되기 때문에 babel을 사용해서 브라우저 호환성을 생각해야 한다. 정리 webpack --> 파일을 하나로 묶어주는 번들러 babel --> 브라우저 호환성을 위한 어쩌고 webpack, babel같은 리액..

REACT ?? 페이스북이 만든 사용자 UI구축을 위한 라이브러리(프레임워크 위치에 있다고 봐도 무방) 재사용이 가능한 UI를 생성 할 수 있게 해준다. 이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 UI를 렌더링한다. 따라서! 최소한의 DOM처리로 컴포넌트들을 업데이트 할 수 있게 해준다~! REACT 대표적인 특징 1. JSX문법 자바스크립트 안에서 HTML문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 확장 문법 class HelloMessage extends React.Component { render() { return ( Hello {this.props.name} ); } } JS안에서는 원래 저런 문법이 사용이 불가능하다, 하지만 ..