form 태그

form에 submit button이나 img 태그 요소가 없으면 서버로 전송이 일어나지 않는다.
form 태그 내에 있으면 enter 버튼을 눌렀을 때 자동으로 submit 이벤트가 작동한다.

안됑..ㅜㅡ

태그의 id와 컴포넌트와 ref의 필요성

정리

• 컴포넌트 안에 함수add를 정의해 놓음
  
• 컴포넌트 밖엣 메서드 접근하기 위해 ref 등록함
  

ref를 사용해야한다
언제?
★★★ DOM 객체를 직접적으로 사용해야 할때!!

파일처리가 db보다 빠름.db 는 병렬처리

Collection map, stream

// 스트림형태로 램메모리에 올려서 (캐싱) 데이터 조회 속력(효율)을 높임 / 메모리를 써서 코딩하기/컬랙션 많이 쓰기/

예제코드

import React, { useState } from 'react';

const IterationSample = () => {
    const [inputText, setInputText] = useState('');
    const [names, setNames] = useState([
        {id:1, text:'눈사람'},        
        {id:2, text:'얼음'},
        {id:3, text:'눈'},
        {id:4, text:'바람'},
    ]);
    const nameList = names.map((item) => <li key={item.id} > {item.id}:{item.text} </li> );

    const handlerSubmit = (e)=> {
        e.preventDefault();
        console.log('입력된값 : '+ inputText);
        setNames(names.concat({id:names.length +1, text:inputText}));
        setInputText('');
        return false;
    }

    const handlerChange = (e) => {
        setInputText(e.target.value);
    }
    return (
        <div>
            <div>
                <form name='myForm' onSubmit={handlerSubmit}>
                    <input type='text' onChange={handlerChange} value={inputText}></input>
                    <button type='submit' >추가</button>
                </form>
            </div>
            <ul>{nameList}</ul>
        </div>
    );
};

export default IterationSample;

/*
import React from 'react';

const IterationSample = () => {
    const names = ['눈사람', '얼음', '눈', '바람'];
    const nameList = names.map((name, idx) => <li key={idx} >{idx}:{name}</li> );
    return (
        <div>
            <ul>{nameList}</ul>
        </div>
    );
};

export default IterationSample;
*/

참고

const obj = {id:1, text:"asas"}

JSON이 아니고 연관 배열 표기법 임

• JSON은 일단 "문자열"이라고 이해해야 함.
  {id:1, text:"asas"} : 연관배열
  [{id:1, text:"asas"}] : 색인배열
  '{id:1, text:"asas"}'/'[{id:1, text:"asas"}]' : JSON

숙제

• EventPracticeFn
  지난 숙제 : map써서 바꾸기

• ScrollBox 컴포넌트
  클래스형 스크롤 박스 컴포넌트를 createRef() 함수를 이용해서 구현 해본다
  참조 파일 : ScrollBox.js

디자인패턴.....
옵저버 패턴
전략패턴 + 상태 (상태와 전략은 같이 돌아가는거라)