이벤트에 함수 전달하기 onClick과 같은 이벤트에는 아래와 같이 일반적으로 함수를 동작시키는 코드를 작성한다. 함수명 뒤에 ()를 붙이지 않아야한다. function onClickHandle(){ ... } 그렇다면 props를 전달하려면 어떻게 해야할까. ()를 삽입하여 props를 함수에게 전달하려면 arrow를 사용하거나 bind 함수를 사용해야한다. function onClickHandle(btnNum){ ... } //Arrow 사용 {onClickHandle(1);}}> //Bind 사용 onClick과 같이 매개인자가 전달되지 않는 함수의 경우는 반드시 arrow나 bind를 사용해야한다. onChange처럼 매개인자를 제공해주는 경우는 ()를 생략해도 된다. 이해하기 만약 arrow, ..

React Process index.html 에서 id가 root인 div를 호출합니다. index.js 파일의 ReactDom.render가 root에 해당합니다. root는 기본적으로 App 컴포넌트를 호출합니다. App 컴포넌트가 최상단 컴포넌트라고 할 수 있습니다. Import / Export Import는 다른 js, css, image 등의 파일 내용을 해당 파일에서 사용하기 위해 필요하다. 조금 특이한 점은 import시 대상 파일에서 사용할 컴포넌트 명을 명시해주어야한다는 점이다. import Another, {Conatiner, CustomButton} from './Container'; //Container.js 파일의 Container, CustomButton 컴포넌트를 사용하려면 정..

Context 리액트의 기본 흐름은 트리 구조이다. 컴포넌트 내에서 자식 컴포넌트를 호출하고, 자식 컴포넌트는 그 하위 컴포넌트를 호출하게 된다. 최상단 컴포넌트에서 최하위 컴포넌트로 props를 전달하고자 할 때, 중간의 모든 컴포넌트에서 이를 주고 받는 코드들이 포함되어야 한다. 이를 해결하기 위해 존재하는 것이 context이다. Context 정의 Context – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 공식문서에 너무 잘 정리되어있어 이를 보며 이해하는 것이 수월할 것이다. 핵심은 최상단에 context를 선언하는 것. //'light'는 기본 값 const ThemeContext = React.cre..

* 이 포스팅은 플러터와 비교하며 작성했으므로, 플러터를 모른다면 불편할 수 있다. 상태관리 플러터를 어느정도로 배웠다면 리액트의 상태 관리 개념은 매우 쉽게 이해할 것이다. 익숙한 setState도 리액트에서 동일한 개념과 명칭으로 사용되며, 클래스에서만 사용가능하다는 점도 동일하다. 플러터에서는 stateful과 stateless 클래스가 기본으로 제공되었다면 리액트에서는 상태가 필요할 땐 클래스를, 상태가 필요하지 않을 때는 function을 사용한다. 하지만 플러터의 그것보다 귀찮고 Stateful Builder처럼 편리한 위젯도 기본으로 존재하지 않는다. 플러터의 Provider와 GetX가 외부 개발자에 의해 개발되고 널리 사용된 것처럼, 리액트에서도 Hook이라는 패키지로 상태 관리가 매우 ..

플러터를 공부한지도 반년에 근접하고 있다. product를 만들기 위해 매일같이 출근해 근무하는 덕에 비약적으로 실력이 느는 것이 느껴지지만 새로운 기능들을 추가하고 기술들을 접할 때마다 머리를 싸매고 답이 나올때까지 구글링을 한다. 정말 주니어 개발자의 길은 멀고도 험하다. 하지만 아무리 힘들어도 앱을 만드는 것만으론 만족할 수 없다. 웹도 공부하자. 최근에 내가 존경하고 좋아하게된 사람이 리액트를 배우고있다. 경쟁심이 불타기도 하고, 함께하고 싶은 마음에 나 또한 리액트를 틈틈히 배우고자한다. 리액트와 플러터 둘 모두를 자유자재로 다룰줄 안다면 정말 세계정복이 가능하지 않을까?(..) 또, 플러터와 리액트(네이티브)가 비교되는 기술인 만큼 둘의 장단점을 확실히 알고 사용할 수 있을 것 같다. Reac..