(23.01.26.) React 프레임워크 : 리액트에서 JSON 파일 다루기 및 필터기능

리액트에서 JSON 파일 다루기

 

 

List.js

import emps from "./emps.json";
function List()
{
    return( 
        <>
        <h1>테이블에 데이터 표시하기</h1>
        <table>
            <thead>
                <tr><th>번호</th><th>이름</th><th>전화</th></tr>
            </thead>
            <tbody>
            {  
                emps.list.map((emp)=> 
                <tr key={emp.num}>
                    <td>{emp.num}</td><td>{emp.name}</td><td>{emp.phone}</td>
                </tr> 
                )
            }
            </tbody>
        </table>
        </>
    );
}
export default List;
 
//emps 제이슨 어레이 emp는 리스트의 하나의 원소(익명 함수의 파라미터)

 

1. jsx에선 테이블의 헤드와 바디가 꼭있어야 한다.

 

2. return문장 안에서는 1개의 태그만 사용할 수 있다.

    h1의 태그와, table의 태그 1개 총 2개가 있는데, <>이름없는 태그를 사용함으로써 2개의 태그를 1개로 묶어준다

 

 

emps.json

{
    "list":[
    { "id":11, "num":11, "name":"Smith", "phone":"010-2149-3214", "dept":20},
    { "id":12, "num":12, "name":"Lora", "phone":"010-2547-5498", "dept":20},
    { "id":13, "num":13, "name":"Jone", "phone":"010-2193-2594", "dept":30},
    { "id":14, "num":14, "name":"Scott", "phone":"010-2368-95474", "dept":40}
    ]
}

 

 

 

App.js

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

 

 

 

실행결과  :

{emp.num}   >   동적인 값

 

 

 

---

필터기능을 이용하여 원하는 값만 산출하기

 

filter기능 사용  -  emp.dept 가 20인 사람만 추출하기

 

List.js

import emps from "./emps.json";
function List()
{
    const filtered = emps.list.filter(emp=>emp.dept==20)
    return( 
        <>
        <h1>테이블에 데이터 표시하기</h1>
        <table>
            <thead>
                <tr><th>번호</th><th>이름</th><th>전화</th></tr>
            </thead>
            <tbody>
            {  
                filtered.map((emp)=> 
                <tr key={emp.num}>
                    <td>{emp.num}</td><td>{emp.name}</td><td>{emp.phone}</td>
                </tr> 
                )
            }
            </tbody>
        </table>
        </>
    );
}
export default List;
//함수도 객체로서 보기 때문에 함수안에 또 다른 함수를 선언할 수 있다. 

list 대신 filtered 변수를 넣어준다.

 

 

 

실행 결과 : 

 

---

함수 안에 함수를 선언하여 익명을 함수 말고 함수명을 불러 데이터 나타내기

 

 

 

List.js

import emps from "./emps.json";
function List()
{
    const filtered = emps.list.filter(emp=>emp.dept==30)
 
    /* 컴포넌트 안에서만 사용할 함수 (함수 선언 이유 : 코드의 재사용을 높이기 위해) */
    function GetTr(emp){
        return(
            <tr key={emp.num}>
                <td>{emp.num}</td><td>{emp.name}</td><td>{emp.phone}</td>
            </tr>
        );
    }
    /* 함수 끝 */ 
 
    return( 
        <>
        <h1>테이블에 데이터 표시하기</h1>
        <table>
            <thead>
                <tr><th>번호</th><th>이름</th><th>전화</th></tr>
            </thead>
            <tbody>
            {  
                filtered.map((emp)=> 
                GetTr(emp)
                )
            }
            </tbody>
        </table>
        </>
    );
}
export default List;
 

 

 

 

실행 결과 : 

 

 

 

---

useEffect()함수 사용하기

 

 

-상태변수의 값이 변경되면 자동으로 호출되는 함수

-상태변수의 값이 변경된 후에 후속 조치가 필요한 경우에 활용

 

const[num,setNum] = useState(0);
 

 

-상태변수가 변경되면 그 변수를 화면에 자동으로 출력해준다.

<div>{num}</div>

 

 

useEffect(함수,[num]) :

- 함수 : 삼태변수가 변경되면 자동으로 실행되는 함수

- [] : 의존성 배열 (참조할 상태변수)

- 의존성 배열이 빈 배열인 경우 : 시작할 때 한번만 실행

 

 

useEffect(function()){
 
       //서버에 접속하여 데이터를 가져올 때
 
},[]);
 
 

useEffect(function()){

       //서버에 접속하여 데이터를 가져올 때

},[]);