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

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

 

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를 여러번 사용하면 됩니다. 
 

 

 

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

 

isRequire 값을 입력하지 않아 warning 발생한 결과

 

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;

 

 

 

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

#정리 : Event를 이용하여 State의 값을 변경  (0) 2023.01.11
#08. state의 사용 useState  (0) 2023.01.09
#07-03. props : propTypes의 사용  (0) 2023.01.03
#07-02. prop : children의 사용  (0) 2023.01.01
#07-01. props의 사용  (0) 2023.01.01

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

 

GitHub - facebook/prop-types: Runtime type checking for React props and similar objects

Runtime type checking for React props and similar objects - GitHub - facebook/prop-types: Runtime type checking for React props and similar objects

github.com

 

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

#08. state의 사용 useState  (0) 2023.01.09
#07-04. props : isRequired의 사용  (0) 2023.01.04
#07-02. prop : children의 사용  (0) 2023.01.01
#07-01. props의 사용  (0) 2023.01.01
#06. Event의 작성  (0) 2022.12.26

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 : "기본값"
};

 

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

#07-04. props : isRequired의 사용  (0) 2023.01.04
#07-03. props : propTypes의 사용  (0) 2023.01.03
#07-01. props의 사용  (0) 2023.01.01
#06. Event의 작성  (0) 2022.12.26
#05. CSS의 작성  (2) 2022.12.22

props

props는 properties를 가리키는 용어입니다. 컴포넌트의 속성을 설정할 때 사용하는 요소입니다. 

컴포넌트를 불러와 사용하는 상위 컴포넌트에서 설정할 수 있습니다. (강좌에서는 상위 컴포넌트 : App 입니다.)

 

component 하위에 props.js 파일을 하나 생성하도록 합니다. 

Props.js

export default function Props(props){

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

Apps.js를 아래와 같이 수정 합니다. 

Props.js에서 props값을 출력하도록 작성하고 Apps.js에서 props.name 값을 전달합니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="abcd"/>
    </div>
  );
}

export default App;

props의 name을 화면에 출력

 

Apps에서 전달한 abcd 값을 삭제하면...?

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

export default App;

값이 절달되지 않아 값의 출력이 없습니다. 그럼 기본값을 설정하는 defaultProps를 사용해보겠습니다. 

Props.js를 다시 수정하겠습니다.

export default function Props(props){

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

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

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

#07-03. props : propTypes의 사용  (0) 2023.01.03
#07-02. prop : children의 사용  (0) 2023.01.01
#06. Event의 작성  (0) 2022.12.26
#05. CSS의 작성  (2) 2022.12.22
#04-02. Component를 만들어보자  (0) 2022.12.20

버튼을 클릭하거나 내용이 수정되었을때 어떠한 동작을 하도록 해보겠습니다. 

 

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

export default function Event(){

    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button>button A</button>
                <button>button B</button>

            </div>
            <input type="text"/>
        </div>
    );
}

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

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

export default App;

Event componet 작성된 결과

button A를 클릭할 때 alert 창을 호출하도록 작성하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

alert를 호출한 결과

button B에 onClick 이벤트를 직접 작성해보도록 하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

button B를 클릭하여 console에 출력된 화면

함수로 값을 전달하도록 하겠습니다. 

Event.js 파일을 수정합니다.  (함수 추가, 버튼 추가)

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text"/>
        </div>
    );
}

전달한 Text를 Console에 출력한 화면

 

input에 내용이 변경될 때 마다 console에 변경된 text를 출력하도록 하겠습니다. ( onChange 사용 )


Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
        </div>
    );
}

    - input에 onChange를 추가하고 동작할 함수의 이름을 작성합니다.

    - 동작할 함수는 event argument를 받아서 사용할 수 있기 때문에 e.target.value를 사용하여 이벤트를 전달한 객체의

      value값을 사용할 수 있습니다. 

 

1234를 입력하면서 변경된 내용이 console에 출력되는 화면

 

input을 한개 더 추가한 뒤 기존에 생성한 consoleTextPrint 함수를 이용해서 onChange 이벤트 안에 직접 작성해보겠습니다. 

Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
            <input type="text" onChange={
                e => {
                    const targetValue = e.target.value;
                    consoleTextPrint(targetValue);
                }
            }/>
        </div>
    );
}

consoleTextPrint함수를 이용하여 console에 출력한 화면

 

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

#07-02. prop : children의 사용  (0) 2023.01.01
#07-01. props의 사용  (0) 2023.01.01
#05. CSS의 작성  (2) 2022.12.22
#04-02. Component를 만들어보자  (0) 2022.12.20
#04-01. Component 란?  (0) 2022.12.20

생성되어있는 App.js에 컴포넌트를 추가하여 화면을 그리는 간단한 작업을 수행하겠습니다. 

 

src 폴더 하위에 component 폴더를 생성합니다. 

새로 생성한 component하위에 3개의 compoent 를 생성할 계획입니다. 

  • Greeting.js
  • Money.js
  • Welcome.js

 

 

 

 

 

 

Greeting.js 

export default function Greeting(){
    return <h2>Greeting!!!</h2>
}

Welcome.js

export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

참고. Component를 작성할때 작성 방법

//방법 1
export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

//방법 2
const Welcome = function(){
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

//방법 3
const Welcome = () => {
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

 

 

이렇게 작성된 두개의 Component를 App.js에서 사용해 보겠습니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';
import Welcome from './component/Welcome';
function App() {
  return (
    <div className="App">
      <Greeting />
      <Welcome/>
    </div>
  );
}

export default App;

실행된 화면

이번에는 Welcome안에 Money를 넣어서 화면을 구성하도록 하겠습니다. 

 

Moneny.js 를 작성합니다. 

export default function Money(){
    return <h3>Money</h3>
}

Welcome.js를 아래와 같이 수정합니다.

import Money from './Money'

export default function Welcome(){
    return (
        <h2>Welcome !!</h2>   
        <Money/>
    )
}

그리고 저장을 하면 아래와 같이 오류가 발생합니다. 

JSX는 return할때 한개의 Object만 return할 수 있습니다. 

즉, Welcome의 <h2>와 <Money/> 안에 있는 <h3>가 리턴되어 2개의 Object가 리턴됨으로서 오류가 발생했습니다. 

 

Welcome.js의 코드를 아래와 같이 수정합니다. 

import Money from './Money'

export default function Welcome(){
    return (
        <abcd>
        <h2>Welcome !!</h2>   
        <Money/>
        </abcd>
    )
}

<abcd>를 추가하여 한개의 Object로 변경하여 retrurn되도록 수정하면 정상적으로 화면이 실행됩니다. 

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

#06. Event의 작성  (0) 2022.12.26
#05. CSS의 작성  (2) 2022.12.22
#04-01. Component 란?  (0) 2022.12.20
#03-02.폴더 및 파일의 역할  (0) 2022.12.19
#03-01. Create-react-app 설치 및 오류사항 대응  (0) 2022.12.19

+ Recent posts