작심삼일

useEffect useEffect( 실행함수 , [모니터링 대상] ) 바로 실행함수를 실행하고, 모니터링할 대상의 변수가 변했을 경우 실행함수를 재실행합니다. 아래 예제를 살펴봅시다. 1. useEffect( 실행함수, [] ) 모니터링 대상을 비웠을 경우 한번만 실행합니다. 소스 코드 import React from 'react'; // useEffect(실행함수, [모니터링대상없음]) : 컴포넌트 한번만 실행됨 function Component1(){ const [base, Func] = React.useState(0); React.useEffect(() => { Func(base+1); console.log('컴포넌트 한번 반복'); }, []); return ( {base} ) } 결과 2. u..

React 에서 컴포넌트에서 데이터를 관리할때 사용 하는 개념으로 State와 Props 가 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 할때, Props를 사용합니다. 컴포넌트에서의 변화에 대한 UI 업데이트 진행하려면, State를 사용합니다. 아래의 예제를 따라하면 이해하기 수월합니다. 1. Props 이전 포스팅에서 상속관계에 대해서 배웠습니다. (이전 포스팅 바로가기 : [React] 컴포넌트 상속(부모, 자식) 구현 방법) parent.js에서 자식 컴포넌트를 호출 할 때, name과 age를 입력해 봅니다. child.js에는 props로 태그에 표시되도록 작성해줍니다. parent.js import ChildCom from './child'; function ParentCom..

React에서는 컴포넌트에서 JSX 문법을 사용할 수 있습니다. {}중괄호를 사용해서 자바스크립트에서 사용한 변수, 메서드 같은 것을 자유롭게 사용 가능합니다. 1. 변수 불러오기 태그 요소안에 변수를 사이에 넣을수 있습니다. 소스 코드 // 1. 변수를 불러온다. function JsxComponent(){ const text = "숫자"; const num = 2; return ( JSX 예시 1 : {text} {num} {/* 중괄호를 통해 text, num 불러오기 */} ) } 결과 2. 메서드 불러오기 함수를 {}중괄호로 불러 올 수도 있습니다. 소스 코드 // 2. function을 불러온다. function JsxComponent1(){ const textfunc = function(){..

컴포넌트도 부모 자식 관계처럼 불러와서 사용할 수 있습니다. 사실 상속관계라고 하기엔 좀 너무 간단합니다. 그냥 export 하는 컴포넌트를 import로 불러와서 사용하는 겁니다. 1. 자식 자식이라는 태그를 리턴하는 child.js 파일을 생성합니다. child.js function ChildComponent(){ return 자식 } export default ChildComponent; export에 default를 사용하는 이유는 단일 함수이기 때문입니다. (함수가 여러개일 경우는 사용하지 않도록 합니다.) 2. 부모 부모 컴포넌트에서는 import로 ./child를 불러옵니다. 단일(default)로 export 했기 때문에, ChildCom 이름으로 바꿔서 사용 가능합니다. ParentCom..