eval은 JavaScript 코드에서 문자열을 실행할 수 있는 기능을 제공하지만, 보안상 위험과 디버깅 어려움, 성능 저하 등의 이유로 사용을 피하는 것이 좋습니다. 대신 new Function()을 사용하여 문자열을 함수로 실행하는 방법을 사용하면 보다 안전하게 코드를 실행할 수 있습니다. 이 문서는 eval을 new Function()으로 변경하는 방법을 안내합니다.


eval 사용 예시

let x = 10;
let code = "x + 5";
let result = eval(code);
console.log(result);  // 15

위 예시에서 eval은 문자열로 제공된 JavaScript 코드를 실행하여 결과를 반환합니다. 그러나 eval은 다양한 보안 위험을 초래할 수 있습니다.


new Function() 사용 예시

new Function()은 문자열을 함수로 감싸서 실행하는 방법입니다. eval보다 상대적으로 더 안전한 방법으로 코드 실행을 제공합니다. new Function()은 다음과 같이 사용할 수 있습니다.

let x = 10;
let code = "x + 5";
let func = new Function('return ' + code);
let result = func();
console.log(result);  // 15

new Function()은 실행할 코드 문자열을 함수로 감싸며, 이 경우에는 return을 명시적으로 추가해야 합니다.


eval을 new Function()으로 변경하는 단계

단계 1: eval로 실행하려는 코드 문자열 추출

먼저 eval에서 사용되는 코드 문자열을 new Function()에서 사용할 수 있는 형태로 변환합니다. 예를 들어, eval에서 x + 5처럼 계산하는 코드가 있다면, 이 코드 문자열을 그대로 new Function()으로 넘길 수 있습니다.

단계 2: eval에서 실행되는 코드에 return 추가

new Function()은 실행하는 코드에서 값을 반환하려면 return 키워드를 사용해야 합니다. 따라서 eval에서 계산된 값을 new Function()으로 변환할 때는 반환값을 명시적으로 지정해야 합니다.

단계 3: 변수 접근 방식 변경

eval은 해당 코드가 실행되는 범위에서 변수를 직접 참조할 수 있지만, new Function()은 별도의 함수 범위 내에서 실행됩니다. 필요한 변수는 new Function()에 인자로 넘겨줘야 합니다.

예시:

eval 사용:

let x = 10;
let code = "x + 5";
let result = eval(code);
console.log(result);  // 15

new Function()으로 변경:

let x = 10;
let code = "x + 5";
let func = new Function('x', 'return ' + code);  // 'x'를 매개변수로 추가
let result = func(x);  // x 값을 전달
console.log(result);  // 15

위와 같이 new Function()은 코드 내에서 외부 변수를 참조하지 않기 때문에, 필요한 변수를 함수의 매개변수로 전달해야 합니다.


변경 시 고려사항

  • 보안: eval은 실행되는 코드가 악의적일 경우 심각한 보안 문제를 초래할 수 있습니다. new Function() 역시 외부 입력을 사용하기 전에 반드시 검증해야 합니다.
  • 디버깅: eval은 디버깅이 어려운 특성이 있습니다. new Function()은 함수로 변환되기 때문에 디버깅이 조금 더 용이할 수 있습니다.
  • 성능: eval은 실행 시에 파싱 및 컴파일 작업이 필요하므로 성능에 영향을 줄 수 있습니다. new Function()은 상대적으로 성능에 영향을 덜 미칩니다.

예외 처리

new Function()을 사용할 때 코드가 잘못된 경우 예외가 발생할 수 있습니다. 이를 처리하기 위해 try-catch 문을 사용할 수 있습니다.

let code = "x + 5";
try {
  let func = new Function('x', 'return ' + code);
  let result = func(10);
  console.log(result);
} catch (e) {
  console.error('Error executing code:', e);
}

결론

  • eval을 사용할 필요가 있을 때 new Function()을 사용하면 보안성과 성능 측면에서 더 안전한 대안을 제공합니다.
  • 코드를 new Function()으로 변경할 때는 변수를 매개변수로 전달하는 점에 유의해야 합니다.
  • eval 사용을 최소화하고, 필요하다면 new Function()을 통해 동적으로 코드를 실행할 수 있는 방법을 적용하는 것이 바람직합니다.

jQuery 기반의 무료 차트 라이브러리 소개

웹 개발자라면 데이터 시각화가 얼마나 중요한지 잘 알고 계실 겁니다. 데이터를 시각적으로 표현하면 사용자에게 더 직관적이고 이해하기 쉬운 정보를 제공할 수 있습니다. 오늘은 jQuery 기반의 무료 차트 라이브러리 몇 가지를 소개해드리겠습니다.

1. Chart.js

Chart.js는 HTML5 기반의 차트 라이브러리로, 간단하고 명확한 API를 제공하여 다양한 차트를 쉽게 만들 수 있습니다. 라인 차트, 바 차트, 파이 차트 등 다양한 차트 유형을 지원하며, 커스터마이징이 용이합니다. Chart.js는 특히 초보자에게 추천할 만한 라이브러리입니다. 또한, Chart.js는 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다. Chart.js의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Chart.js
웹사이트: Chart.js

2. jqPlot

jqPlot은 jQuery 기반의 차트 플러그인으로, 다양한 차트 유형을 지원합니다. 라인 차트, 바 차트, 파이 차트 등 기본적인 차트 외에도 캔들스틱 차트와 같은 고급 차트도 구현할 수 있습니다. 또한, 플러그인 구조로 되어 있어 필요에 따라 기능을 확장할 수 있습니다. jqPlot은 다양한 플러그인과 함께 사용할 수 있어, 차트의 기능을 더욱 풍부하게 만들 수 있습니다. 또한, jqPlot은 다양한 브라우저와 호환되며, 모바일 디바이스에서도 원활하게 작동합니다.

라이선스: MIT 라이선스
GitHub: jqPlot
웹사이트: jqPlot

3. Flot

Flot은 jQuery 기반의 차트 라이브러리로, 인터랙티브한 차트를 쉽게 만들 수 있습니다. 플러그인 구조로 되어 있어 다양한 기능을 추가할 수 있으며, 성능이 뛰어나 대용량 데이터 처리에도 적합합니다. Flot은 특히 실시간 데이터 시각화에 강점을 가지고 있습니다. 또한, Flot은 다양한 브라우저와 호환되며, 모바일 디바이스에서도 원활하게 작동합니다. Flot의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Flot
웹사이트: Flot

4. Highcharts (무료 버전)

Highcharts는 강력한 기능을 제공하는 차트 라이브러리로, 상업용으로는 유료이지만 비상업용 프로젝트에서는 무료로 사용할 수 있습니다. 다양한 차트 유형을 지원하며, 커스터마이징이 용이하고, 문서화가 잘 되어 있어 사용하기 편리합니다. Highcharts는 다양한 데이터 소스와 통합할 수 있어, 복잡한 데이터 시각화에도 적합합니다. 또한, Highcharts는 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다.

라이선스: 비상업용 프로젝트에 한해 무료
GitHub: Highcharts
웹사이트: Highcharts

5. Morris.js

Morris.js는 간단하고 사용하기 쉬운 jQuery 기반의 차트 라이브러리로, 라인 차트, 바 차트, 도넛 차트 등을 지원합니다. Morris.js는 특히 데이터 시각화의 미적 요소에 중점을 두어, 아름답고 직관적인 차트를 만들 수 있습니다. 또한, Morris.js는 JSON 데이터를 쉽게 처리할 수 있어, 동적인 데이터 시각화에 적합합니다. Morris.js의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Morris.js
웹사이트: Morris.js

6. Billboard.js

Billboard.js는 네이버에서 개발한 jQuery 기반의 차트 라이브러리로, 다양한 차트 유형을 지원하며, 사용하기 쉽고 강력한 기능을 제공합니다. Billboard.js는 특히 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다. 그러나 최신 버전에서는 Internet Explorer(IE)를 지원하지 않으므로, 다른 브라우저를 사용하는 것이 좋습니다.

라이선스: MIT 라이선스
GitHub: Billboard.js
웹사이트: Billboard.js

7. Dygraphs

Dygraphs는 대용량 데이터 시각화에 적합한 jQuery 기반의 차트 라이브러리입니다. 실시간 데이터 업데이트와 줌 기능을 지원하여, 복잡한 데이터를 효과적으로 시각화할 수 있습니다. Dygraphs는 특히 금융 데이터 시각화에 강점을 가지고 있습니다.

라이선스: MIT 라이선스
GitHub: Dygraphs
웹사이트: Dygraphs

8. Sparklines

Sparklines는 작은 크기의 차트를 생성하는 데 특화된 jQuery 기반의 차트 라이브러리입니다. 주로 데이터 테이블이나 텍스트 내에 삽입하여 간단한 데이터 시각화를 제공하는 데 사용됩니다. Sparklines는 다양한 차트 유형을 지원하며, 사용하기 쉽고 가벼운 라이브러리입니다.

라이선스: MIT 라이선스
GitHub: Sparklines
웹사이트: Sparklines

결론

jQuery 기반의 무료 차트 라이브러리는 다양하게 존재하며, 각 라이브러리마다 장단점이 있습니다. 프로젝트의 요구사항에 맞는 라이브러리를 선택하여 데이터를 효과적으로 시각화해보세요. 위에서 소개한 라이브러리들은 모두 사용하기 쉽고 강력한 기능을 제공하므로, 여러분의 웹 개발 프로젝트에 큰 도움이 될 것입니다.

IE에서 사용가능한 배열에서 중복 제거하기 

	    this.removeDuplicates = function(arr) {
	        var uniqueArray = [];
	        var seen = {}; // 이미 본 값을 추적하는 객체

	        for (var i = 0; i < arr.length; i++) {
	            if (!seen[arr[i]]) { // 이미 본 값이 아니면
	                uniqueArray.push(arr[i]); // 배열에 추가
	                seen[arr[i]] = true; // 본 값을 추적
	            }
	        }
	        return uniqueArray;
	    }

'Web > Javascript' 카테고리의 다른 글

TypeScript를 공부 가이드  (0) 2023.02.27
toString()의 사용법과 활용 예시  (0) 2023.02.14
조건문 좀더 편하게 사용하기  (0) 2023.01.13

JavaScript는 현재 가장 인기 있는 웹 프로그래밍 언어 중 하나입니다. JavaScript는 프론트엔드, 백엔드 및 모바일 개발에서 널리 사용됩니다. 따라서 JavaScript를 배우는 것은 웹 개발자로서 중요한 기술입니다.


JavaScript를 배우기 위해서는 TypeScript를 배우는 것이 좋습니다. TypeScript는 JavaScript의 상위 집합 언어로, JavaScript에 강력한 정적 타입 검사 기능을 추가합니다. TypeScript는 프로그래밍 언어를 배우는 초보자에게도 친숙하며, 코드를 작성하는 것을 더 쉽고 안전하게 만들어 줍니다.


따라서 TypeScript를 배우는 것은 JavaScript를 배우는 데 큰 도움이 됩니다. TypeScript를 배우기 위해서는 다음과 같은 자료들을 참고할 수 있습니다.

 

 

TypeScript 핸드북

TypeScript 공식 문서에서 제공하는 핸드북입니다. TypeScript를 처음 배우는 초보자부터 전문가까지 모두에게 유용한 정보를 제공합니다.

링크: https://www.typescriptlang.org/docs/handbook/intro.html

 

TypeScript Deep Dive

TypeScript를 깊이 이해하고 싶은 사람을 위한 서적입니다. 책은 TypeScript의 개념, 기능 및 사용 사례에 대해 자세히 설명합니다.
링크: https://basarat.gitbook.io/typescript/

 

Udemy - Typescript: The Complete Developer's Guide

Udemy에서 제공하는 TypeScript 온라인 강의입니다. 실제 프로젝트를 통해 TypeScript의 모든 기능과 사용 사례를 배울 수 있습니다.
링크: https://www.udemy.com/course/typescript-the-complete-developers-guide/

 

Coursera - Programming Languages, Part A

프린스턴 대학교에서 제공하는 컴퓨터 과학 강의 중 하나입니다. 이 강의는 TypeScript를 비롯한 다양한 프로그래밍 언어를 다루며, 함수형 프로그래밍 및 객체 지향 프로그래밍 등의 개념을 배울 수 있습니다.
링크: https://www.coursera.org/learn/programming-languages

 

 

 

이러한 자료들을 참고하여 TypeScript를 배우면 JavaScript 프로그래밍에 대한 깊은 이해를 얻을 수 있습니다. TypeScript를 배우는 것은 웹 개발자로서 취업에도 큰 도움이 될 것입니다.

 

 

'Web > Javascript' 카테고리의 다른 글

배열 중복제거  (0) 2024.11.08
toString()의 사용법과 활용 예시  (0) 2023.02.14
조건문 좀더 편하게 사용하기  (0) 2023.01.13

Object.prototype.toString()

 

toString() 은 문자열을 반환하는 object의 대표적인 방법입니다.

obj.toString();

위와 같은 방법으로 많이 사용합니다.

 

객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있습니다. 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속됩니다.

이 메서드가 사용자 지정 개체에서 재정의되지 않으면 toString()은 "[object type]"을 반환합니다. 여기서 type은 object type입니다.

 

.... 까지는 대부분 알고 있고 사용하고 있는 기능입니다만.

 

 

toString() 편리한 기능이 있습니다. 

10진수의 값의 경우 toString(arg) 매개변수를 이용하여 다른 진수로 변경할 수 있습니다. 

let baseTenInt = 10;
console.log(baseTenInt.toString(2));   // 2진법으로 변환

let bigNum = BigInt(20);
console.log(bigNum.toString(2))    // 2진법으로 변환

 

예를 들자면 16진법으로 변경하여 랜덤 색상을 생성할 수 도 있습니다. 

'#' + Math.floor(Math.random() * 16777215).toString(16);

해당 코드는 16777215를 hex로 표현하면 ffffff가 되므로 해당 코드는 000000부터 ffffff 값을 반환합니다.

 

참고 Link https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

 

Object.prototype.toString() - JavaScript | MDN

The toString() 은 문자열을 반환하는 object의 대표적인 방법이다

developer.mozilla.org

 

'Web > Javascript' 카테고리의 다른 글

배열 중복제거  (0) 2024.11.08
TypeScript를 공부 가이드  (0) 2023.02.27
조건문 좀더 편하게 사용하기  (0) 2023.01.13

Javascript의 map() 함수

 

자바스크립트 배열의 내장함수인 map을 활용하여 컴포넌트를 반복문처럼 렌더링할 수 있습니다. 

map 함수는 전달된 함수를 사용해서 배열 내에서 원하는 규칙에 따라 가공 후 새로운 배열을 생성할 수 있습니다.

 

[사용방법]

array.map(callbackFunc, <thisArgument>)
  • callback: 배열을 생성하는 함수로 파라미터는 다음 세 가지입니다.
    - currentValue: 현재 처리값
    - index: 현재 처리 index
    - array: 원본 배열
  • thisArg(선택 항목): callback 함수 내부에서 사용할 this Ref

[예시 - 01 ] - 아래 내용을 개발자 도구에서 수행해 볼 수 있습니다.

var arr = [5, 4, 9, 7];

var result = arr.map(function(vv){
  return vv * vv;
});

//결과
result = [25, 16, 81, 49];

[예시 - 02 ] - ES6 문법으로 작성

const arr = [5, 4, 9, 7];
const result = arr.map(vv => vv * vv);

//결과
console.log(result);

 

 

방금 작성한 데이터 배열과 유사한 형태로 컴포넌트를 배열로 작성할 수 있습니다. 

 

component / IterPrc.js 파일을 생성합니다. 

export default function IterPrc(){


    const datas = ["1번","2번","3번","4번"];
    const dataList = datas.map((item,idx) => <li>{idx}{item}</li>);

    return (
        <>
            <ul>{dataList}</ul>
        </>
    );
}

 

state에 문자열이나 숫자값이 아닌 Object 형태의 값을 넣어서 컨트롤 해보겠습니다. 

 

StatePrc.js 파일을 component 폴더 하위에 생성합니다. 

import { useState } from "react";

export default function StatePrc(){

    

    const [msg, setMsg] = useState({"message" : "", "user" : ""});

    return (

        <>
            <div>
                <h1>Event Test</h1>
                <div>message : {msg.message}</div>
                <div>user : {msg.user}</div>
                <input type="text"
                    name="msg"
                    placeholder="입력칸"
                    value={msg.message}
                    onChange={(ev)=>{
                        setMsg({...msg, "message" : ev.target.value});
                    }}
                ></input>
                <input type="text"
                    name="user"
                    placeholder="입력칸"
                    value={msg.user}
                    onChange={(ev)=>{
                        setMsg({...msg, "user" : ev.target.value});
                    }}
                ></input>
                <button onClick={()=>{
                    alert(msg.message + "메세지를 초기화 합니다.");
                    setMsg({"message" : "", "user" : ""});
                }}>초기화</button>
            </div>
        </>
    );
}

 

App.js에  방금 작성한 StatePrc 컴포넌트가 출력되도록 추가합니다. 

왼쪽 input은 msg.message를 값을 참조하고 

value={msg.message}

오른쪽 input은 msg.user의 값을 참조하도록 코드를 작성하였습니다.

value={msg.user}

 

state의 값중 object의 값을 변경할 때에는 기존값을 spread 연산자라고 하는 ... 연산자를 이용하여 값을 변경합니다.

setMsg({...msg, "user" : ev.target.value});

 

 

'Web > ReactJS' 카테고리의 다른 글

#09. map()함수의 활용  (0) 2023.01.18
#정리 : Event를 이용하여 State의 값을 변경  (0) 2023.01.11
#08. state의 사용 useState  (0) 2023.01.09
#07-04. props : isRequired의 사용  (0) 2023.01.04
#07-03. props : propTypes의 사용  (0) 2023.01.03

조건문을 사용하다 보면 조건이 많을 때가 있습니다. 

if( 조건 || 조건 || 조건 .....)

이런 조건이 너무 많으면 가독성이 떨어지게 되고 반복되는 코드로 코드가 늘어지게 됩니다. 

예를 들면 아래와 같은 코드가 있습니다. 

function checkName(arg) {
	let rtn = false;
    if (arg === 'A' || arg === 'B' || arg === 'C' || arg === 'D' || arg === 'E' || arg === 'F'){
    	rtn = true;
    }
    return rtn;
  }

function testCode(){
	console.log(checkName('A')); // true
	console.log(checkName('ZZ')); // false
}

좀더 코드의 낭비가 없도록 작성해봅시다. 

function checkName(arg) {
	const = compareValue = ['A','B','C','D','E','F'];
	return compareValue.includes(arg);
  }

function testCode(){
	console.log(checkName('A')); // true
	console.log(checkName('ZZ')); // false
}

 

'Web > Javascript' 카테고리의 다른 글

배열 중복제거  (0) 2024.11.08
TypeScript를 공부 가이드  (0) 2023.02.27
toString()의 사용법과 활용 예시  (0) 2023.02.14

지금까지 공부한 기능을 이용하여 복습의 시간을 위해 간단한 코드를 작성해 보겠습니다. 

 

onChange 이벤트를 이용하여 State에 값을 전달 한뒤 그 값이 화면에 잘 변경되어 출력되도록 하겠습니다. 

 

component 폴더 하위에 EventAndState.js 파일을 생성하고 아래와 같이 작성합니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
        </div>
    );
}

1. useState를 이용하여 name과 setName이 담겨진 배열을 생성하였습니다.

2. input 에 onChange 이벤트를 작성하였습니다. 

3. State에 값이 잘 전달되었는지 확인을 위해 name값을 화면에 출력하였습니다. 

(ev.target.value는 ev라는 이벤트가 발생한 target의 value값을 가리킵니다.)

동일한 기능을 하지만 여러 형태로 작성하는 방법이 있습니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    function onChangeTest(ev){
        setName(ev.target.value)
    }
    const onChangeTest2 = ev => setName(ev.target.value);

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
            <h1>다른 형태의 코드 # 1</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest}
            />
            <h1>다른 형태의 코드 # 2</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest2}
            />
        </div>
    );
}

 

'Web > ReactJS' 카테고리의 다른 글

#09. map()함수의 활용  (0) 2023.01.18
#정리 : useState에 Object 넣어서 값 바꾸기  (0) 2023.01.13
#08. state의 사용 useState  (0) 2023.01.09
#07-04. props : isRequired의 사용  (0) 2023.01.04
#07-03. props : propTypes의 사용  (0) 2023.01.03

useState

useState는 가장 기본적인 Hook 이며 함수 컴포.넌트에서도 가변적인 상태를 가질 수 있도록 합니다. 

함수 컴포넌트에서 상태관리를 해야하는 경우 사용하게 됩니다. 

단순히 말씀드리자면 state는 컴포넌트가 가지고 있는 속성값입니다. (그래서 뭐? 라고 할 수 있지만)
이 속성값이 변하면 리엑트는 자동으로 UI를 다시 출력합니다.

 

즉, 이 state만 잘 다룬다면 화면을 다시 그려주는 작업은 react가 다 알아서 해준다는 거죠

 


일단, 버튼을 클릭하면 화면의 Text가 변경되는 기능을 만들어 보도록 하겠습니다. 

 

component 폴더 하위에 State.js파일을 생성합니다. 

State.js

export default function State(){

    let textValue = "AAAA";

    function ChangeTextValue(){
        if(textValue === "AAAA"){
            textValue = "BBBB";
        }else{
            textValue = "AAAA";
        }
        document.getElementById("text_str").innerHTML = textValue;
        console.log(textValue);
        
    }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{textValue}</h2>
            <button onClick={ChangeTextValue}>Text Change</button>
        </div>
    );
}

생성된 component를 App.js에 추가합니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';  //추가된 항목
import Welcome from './component/Welcome';  //추가된 항목
import Event from './component/Event';  //추가된 항목
import State from './component/State';
function App() {
  return (
    <div className="App">
      {/* <div className='test'>App component</div> */}
      {/* <Greeting />    */}
      {/* <Welcome /> */}
      {/* <Event/> */}
      <State />
    </div>
  );
}

export default App;

Text Change 버튼을 클릭하여 Text를 변경할 수 있습니다.

 

이렇게 작성된 State.js의 코드는 state를 사용한 코드가 아닌 변수의 값을 dom 객체에 직접 넣은 코드입니다. 

document.getElementById("text_str").innerHTML = textValue;

 

이 코드를 동일하게 state를 이용하여 구현해보도록 하겠습니다. 

 

State.js를 수정합니다.

import { useState } from "react";

export default function State(){

    let textValue = "AAAA";

    
    const [name, setName] = useState("AAAA"); 

    // function ChangeTextValue(){
    //     if(textValue === "AAAA"){
    //         textValue = "BBBB";
    //     }else{
    //         textValue = "AAAA";
    //     }
    //     document.getElementById("text_str").innerHTML = textValue;
    //     console.log(textValue);
        
    // }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{name}</h2>
            {/* <button onClick={ChangeTextValue}>Text Change</button> */}
            <button onClick={function(){   
                setName(name === "AAAA" ? "BBBB" : "AAAA");

            }}> changeText </button>
        </div>
    );
}

 

state를 사용하기 위해서는 반드시 지켜야할 것 이 있습니다.

1. state사용시 import 해야한다. 

      import { useState } from "react";

2. 선언시 초기 값을 작성한다.

      const [name, setName] = useState("AAAA");

      useState 함수의 파라메터는 상태의 기본값을 넣어줍니다.  이 함수를 호출하게되면 return되는 값은 배열이며

      0번째 값은 상태 값, 1번째 값은 setter 함수가 담겨 있습니다. 

      즉, name에 "AAAA"를 넣었으며 name값을 수정하는 함수의 이름은 setName이라는 의미입니다. 

 

3. 상태값의 변경은 setter 함수를 이용하여 수행한다.

     setName(name === "AAAA" ? "BBBB" : "AAAA");
 
4. 하나의 useState 함수는 한개의 상태값만 관리할 수 있습니다. 여러 상태값을 관리해야한다면 useState를 여러번 사용하면 됩니다. 
 

 

 

+ Recent posts