한입리액트 4일차 - e.target.value, useRef(), 배열component화

(1) onChage 함수와 e.target 매개변수로 자기 자신의 속성에 접근할 수 있습니다.

                <input
                    value=""
                    onChange={(e) => {
                        console.log(e.target.value);
                    }}
                />
e.target.value와 같이 접근할 속성인 value를 선택할 수 있습니다.

(2) input 태그가 한 줄의 입력창을 만든다면 textarea는 여러 줄의 입력창을 만들 수 있습니다.

                <textarea
                    value={content}
                    onChange={(e) => {
                        setContent(e.target.value);
                    }}
                />

(3) 역할이 비슷하다면 state를 묶어서 사용하면 됩니다.

const DiaryEditor = () => {
    const [state, setState] = useState({
        author: "",
        content: "",
    });

 

 

(4) 객체를 통째로 업데이트 하는 것이기 때문에 target.value만을 변경하고, 바뀌지 않아야 할 부분은 변하지 않도록 합니다.
원래 상태를 유지할 속성들을 스프레드 연산자(...state)를 이용해 값을 있는 그대로  줍니다.

                    value={state.author}
                    onChange={(e) => {
                        setState({
                            ...state,
                            author: e.target.value,
                        });
                    }}

 

 

(5) 동일한 기능을 하고 있는 이벤트는 별도의 함수로 만들어 주도록 합니다.
이 함수는 [e.target.name](setState의 author)의 값을 e.target.value 값으로 바꾸도록 합니다.

    const handleChangeState = (e) => {
        setState({
            ...state,
            [e.target.name]: e.target.value, // 여기서 왜 []로 감싸야 하는지 모르겠음.
        });
    };

                <input
                    name="author"
                    value={state.author}
                    onChange={handleChangeState}
                />

(6) useRef로 DOM 요소 선택하기

우선 변수에 useRef()를 저장합니다.

    const authorInput = useRef();

선택하고자 하는 태그에 변수에 ref={변수이름}을 입력합니다.
                <input
                    ref={authorInput}
                />

변수이름.current로 현재 가리키는 값을 선택할 수 있습니다.
        if (state.author.length < 1) {
            authorInput.current.focus(); // ref로 선택한 태그를 focus() 하도록 합니다.
            return;
        }

(7) 배열을 이용한 렌더링

배열에 데이터를 담습니다.
const dummyList = [
    {
        id: 1,
        author: "이름1",
        created_date: new Date().getTime(),
    },

Date().getTime() 함수는 현재 시간을 number타입에 ms단위로 나타냅니다.
created_date: new Date().getTime(),

props로 데이터를 전달합니다.
            <DiaryList diaryList={dummyList} />

전달한 props의 속성에 map함수를 이용해 접근하여 값을 가져오도록 합니다.
const DiaryList = ({ diaryList }) => {
    return (
        <ul>
            {diaryList.map((it) => (
                <li>
                    <div>작성자 : {it.author}</div>
                </li>
            ))}
        </ul>
    );
};

아무런 값이 전달되지 않을 경우에는 undefined가 전달이 되어 에러가 발생하게 됩니다.
이런 상황에 대비하여 defaultProps의 값에 빈 배열을 전달합니다.
DiaryList.defaultProps = {
    diaryList: [],
};

(8) 배열 component화

배열들을 component로 만들고 props로 각 배열의 데이터를 전달하도록 합니다.
                {diaryList.map((it) => (
                    <DiaryItem key={it.id} {...it} />
                ))}
                
props로 받을 키들을 비구조할당으로 전달합니다.
const DiaryItem = ({ author, content, created_date, emotion, id }) => {

html 구조로 만듭니다.
        <div className="DiaryItem">
            <span className="date">
                {new Date(created_date).toLocaleString()} // created_date: new Date().getTime(),      
            </span>
        </div>

 

.toLocalString() 함수를 이용하면 알아보기 쉬운 형태로 변환됩니다.
2022. 9. 19. 오후 9:00:00