(23.01.25)React 프레임워크 : 리액트 배열 다루기

리액트 배열 다루기

Component 선언, 재사용
시스템 소프트웨어 - 운영체제를 만들거나 하는....
SPA(Single Page Application) - 응용 프로그램을 만들거나 하는....(리액트는 여기에 해당)
빠른 특징이 있다.
데이터 비용 절감
클릭하면 서버에 대한 요청이 아니라 컴포넌트만 바뀌게끔
서버측 데이터를 용청할 때는 ajax 사용



배열 다루기
-로컬에 선언된 배열
-back end 에서 전달한 배열 (리스트)

list.map(f); *f는 list 의 원소 각각을 받아서 가공하고 다시 배열로 리턴
   (v) => <div>{v}</div>
 
list.map( (v) => <div>{v}</div> )
 

-list.map(f); /* f는 list의 원소 각각을 받아서 가공하고 다시 배열로 리턴

 

App.js

 

import Input from './comp/Input.js'
import ShowArr from './comp/ShowArr.js'
function App(){
  return(
  <div className='App'>
    <Input/>
    <ShowArr/>
  </div>
  );
}
export default App;

Input.js

function Input(){ //jsx = javascript +xml
    function onChange(evt){
        let val = evt.target.value;
        console.log("입력된 값"+ val);
    }
    return(
        //컴포넌트가 화면에 보여줄 내용(html 확장 xml, attributes)
        <input type={"text"} value="" onChange={onChange}></input>
    );
 
}
 
export default Input;

ShowArr.js

function ShowArr(){
    const title = "배열 다루기";
    const names =["Smith","Jone","Ward"];
    return(
        names.map(name => <div key={name}>{name}</div>)
    );
}
export default ShowArr;

문장이 다중문장일 경우 {}사용한다. 그 안에서 한 문장이 return이 되야한다.

 

 

 

실행결과 :