React

[React] 이벤트에서 함수 호출하기

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

[React] JSX 기본 익히기

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 컴포넌트를 사용하려면 정..

[React] 전통적인 Context 이해하기.

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

[React] Hook과 상태관리(useState)

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

[JS] 자바스크립트 기본기

출력문 document.write("Hello World"); 내부에서 사칙연산이 가능하며, ""와 같이 html 삽입이 가능 \"를 사용하여 따옴표 출력이 가능, 이외 기본은 동일함 print()와 동일 얼러트 alert('hi'); 웹에서 일반적으로 볼 수 있는 간단한 alert dialog를 출력 상수 const INDEX_VALUE = 1; 일반적으로 대문자와 언더바 사용 절대로 변하지 않는 값 final, const, #define와 동일 변수 자바스크립트는 변수 타입을 지정 할 필요 없이 자동으로 형변환을 한다. 또한, 변수 타입을 지정할 수 없는 것이기도 하다. 타입을 정의할 수 있는 형태가 몇 가지 있다. var tempValue; let tempValue; 등 타입을 지정하든 하지 않든..