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

Javascript의 map() 함수

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

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

[사용방법]

[예시 - 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를 값을 참조하고 

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

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

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

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
}