예제 3

React 에서 useEffect 함수 사용방법

React 에서 useEffect 함수 사용하는 예시입니다. useState 가 사용되었지만 참고사항으로 보시면 될것 같구요. useEffect 는 처음에 기본적으로 한번 실행이 되고 나중에 변수값이 업데이트가 될때마다 실행이 되게 되는데요. 여기서 사용되는 변수의 이름은 currentCount 입니다. 버튼을 클릭할때마다 값이 1 씩 증가되는데요. (props.incrementBy 값은 버튼 속성으로 설정된 값입니다.) 그 값이 10 이상이 되면 다시 0 으로 초기화 시키는 역할을 useEffect 를 통해서 처리하게 됩니다. useEffect 함수 첫번째 파라메터에는 콜백함수를 지정하게 되고 두번째 파라메터에는 해당되는 변수들의 리스트를 지정을 해야합니다. 두번째 파라메터 부분이 엄청 중요하니 꼭 기..

검색창 예제 React : searchBar example in React

React 에서 검색창 예제입니다. useState 를 사용하여 변경된 searchValue 값을 화면에 표시가 되고 리스트 값인 products 의 filter 를 사용하여 필터 검색 효과 예제입니다. 참고로 products 의 데이터는 App.js 에서 searchItems 로 값이 지정이 되어있고 props.searchItems 으로 데이터 값을 받아서 처리가 됩니다. [MySearchBar.js] import React, { useState } from "react" import './MySearchBar.css' const MySearchBar = (props) => { const products = props.searchItems; // console.log(global); const [sea..

다트(dart) 기본 변수값 출력 $ {} 사용법

아래의 소스코드를 보시면, 총 2개의 로컬변수(local variable)가 선언이 되어있습니다. 변수의 이름은 age 와 name 입니다. age 는 int 형 즉 정수이고, name 은 String 형 즉 문자 입니다. 단, 문자인 String 은 대문자 S로 시작하고 값은 홀 따음표(') 또는 쌍 따음표(")로 감싸면 됩니다. void main() { int age = 30; String name = 'SKY'; print( 'name: ' + name + ', age: ' + age.toString()); print('name: $name, age: $age'); print('name: ${name+'LOVE'}, age: ${age+10}'); } print 라는 함수(function) 라고 하..