DEVLOG

*주의 리액트에서 배열을 다룰 때 평소 하던것처럼... push를 사용해서~ this.state.array.push('some value'); 이렇게 하면 되겠지?하면 절대XXX why?? 리액트에서는 state내부의 값을 직접적으로 수정하면 안되기 때문! (불변성 유지) push, splice, unshift, pop 같은 내장함수는 배열 자체를 직접 수정하게 되므로 적합하지 않다. then?? 기존 배열에 기반하여 새 배열을 만들어내는 함수인 concat, slice, map, filter와 같은 함수를 사용해야한다. .concat() : 기존 배열에 원소 또는 배열을 추가하여 새 배열을 만들 수 있다. var arr2 = arr1.concat( 'abc' ); => arr1배열에 문자열 abc를 추..

리액트를 실행시킨 후 자바스크립트가 로딩이 되면서 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같은 리액..