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를 배우는 것은 웹 개발자로서 취업에도 큰 도움이 될 것입니다.

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
}

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

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>
    );
}

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;

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

이 코드를 동일하게 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 해야한다. 

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

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

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

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

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

propTypes를 지정하지 않았을 때 warning을 발생시키는 작업을 수행하도록 하겠습니다.

방법은 propTypes 작성시 뒷부분에 isRequired를 추가로 작성해주면 해당 기능을 사용할 수 있습니다. 

Props.js를 수정합니다.

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        <hr/>
        <div>isRequire Test : {props.isRequireTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
    , isRequireTest : PropTypes.string.isRequired
};

Apps.js를 수정하여 오류를 제거하도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest="99" isRequireTest="필수값을 넣었습니다.">내가 children이다 </Props>
    </div>
  );
}

export default App;

propTypes를 이용한 props의 Type 지정

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할때 propTypes를 사용하여 지정할 수 있습니다.

프로젝트의 규모가 커질 수록 예상할 수 없는 곳에서 발생하는 Error들이 있습니다. 이러한 Error를 예방하기 위해서는 PropTypes를 지정하고 타입(type)을 확인하는 것이 좋습니다.

방법은 이전 장에서 학습한 defaultProp와 유사하며 import구문을 이용하여 'prop-types'를 로드해야합니다.

Props.js 를 수정합니다. 

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
};

Apps.js도 prop 값을 추가로 전달하기 위해 수정합니다.

숫자값을 전달할 때에는 『 typeTest="99" 』가아닌 『 typeTest={99} 』 형태로 전달할 수 있습니다. 

『 typeTest="99" 』로 전달하는 경우 문자열로 인식되게 됩니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest={99} >내가 children이다 </Props>
    </div>
  );
}

export default App;

결과를 보면 타입을 string으로 지정하고 숫자 99를 전달하였지만 정상적으로 99가 표현됩니다. 

하지만 개발자 도구를 열어서 확인해보면 아래 그림과 같이 경고가 발생한 것을 확인할 수 있습니다. 

많은 종류의 PropTypers가 있으며 자세한 내용과 종류는 아래 링크에서 확인할 수 있습니다.

https://github.com/facebook/prop-types

children..?

props를 설명하는 글은 많지만 props 중 children을 설명하는 글을 본적이 없는것 같아서 작성하게 되었습니다.

리엑트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 prop가 children 입니다. 

Apps를 수정하여 알아보도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props>내가 children이다 </Props>
    </div>
  );
}

export default App;

children을 표현할수 있도록 Props 를 수정합니다..

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};