프로그래머 도전기 93일차

오늘은

 

오늘은 새해의 1월 1일 월요일입니다

걱정이 가득한 새해가 될것같습니다

2월 말 이후에는 학원을 수료하고 취직 준비를 해야할텐데

과연 잘 할 수 있을지...

그리고 2023년에도 2022년과 마찬가지로 성취한 것이 그닥 없는것 같아서 드는 후회를

새 해에는 느끼지 않도록 해야겠다는 각오도 새롭게 다졌습니다

 

 

 

 

React 공부

 

<<React에서 사용자 입력 처리>>
한 줄 입력 처리하기 => 작성자
여러 줄 입력 처리하기 => 일기 본문
선택 박스 입력 처리하기 => 감정 점수
사용자 입력 데이터 핸들링하기 => 저장하기

=> diary_editor_component 만들기

* component를 만들때는 보통 파일을 분리해서 사용한다

* onChange = event라고 부를 수 있음 = 사용자가 어떤 행동을 한 것
                  ex) input 입력창 안에 무엇인가 입력이 되었을 때 = event가 있다고 할 수 있다
  onChange = { (e) => {} } input이 변화할 때마다 콜백함수를 작동시킬 수 있고
                                 콜백함수의 매개변수인 event객체 e의 값이출력된다

* 괄호 표기법 = 객체 속성 이름을 동적으로 설정하는 데 사용
                  => 변수나 표현식을 이용하여 동적으로 속성을 정의할 수 있다
* 점 표기법 = 정적인 속성 이름만을 허용

 

 

<<React에서 Dom 조작하기>>
일기 저장 버튼을 클릭했을 때
작성자와 일기가 정상적으로 입력되었는지 확인하고
아니라면 focus하기

* react의 useRef기능
= Dom 요소를 선택할 수 있는 기능

 

  // 상수에 함수 호출의 반환값을 저장, 담기
  // dom요소에 접근할 수 있도록 해주는 reference객체를 상수에 담기
  const authorInput = useRef();
  const contentInput = useRef();

const handleSubmit = () => {
    if (state.author.length < 1) {
      //alert("작성자는 최소 1글자 이상 입력해주세요");
      // 요즘 트렌드는 alert를 띄우기보다 focus를 준다

      // dom요소를 선택하는 상수의 현재 가르키는 값을 current property로 불러와서 사용 가능
      authorInput.current.focus();
      return;
    }

    if (state.content.length < 5) {
      //alert("일기 본문은 최소 5글자 이상 입력해주세요");
      contentInput.current.focus();
      return;
    }

    console.log(state);
    alert("저장 성공!");
  };

<<React에서 리스트 사용하기>>

1. 배열을 이용하여 React에서 LIST를 렌더링하고
개별적인 컴포넌트로 만들어보기

* Rendering = 화면에 표시한다 는 의미

* DiaryList Component

const DiaryList = ({ diaryList }) => {
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다</h4>
      <div>
        {/* key prop이 없는 경우 idx를 활용해도 좋긴 하지만, 
        삭제를 하거나 했을 때 idx가 변경되면 문제가 발생할수도 있다 */}
        {diaryList.map((it) => (
          // 고유한 key prop 필요 = id를 활용
          <div key={it.id}>
            {/* 객체에 점표기법으로 작성자에 접근가능 */}
            <div>작성자 : {it.author}</div>
            <div>일기 : {it.content}</div>
            <div>감정 : {it.emotion}</div>
            <div>작성 시간(ms) : {it.create_date}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// error 방지
DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;

=> DiaryItem component로 분할

import DiaryItem from "./DiaryItem.js";

const DiaryList = ({ diaryList }) => {
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다</h4>
      <div>
        {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}
      </div>
    </div>
  );
};

// error 방지
DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;

* DiaryItem component

// diaryItem component 생성
const DiaryItem = (author, content, create_date, emotion, id) => {
  return (
    <div className="DiaryItem">
      <div className="info">
        <span>
          작성자 : {author} | 감정점수 : {emotion}
        </span>
        <br />
        <span className="date">{new Date(create_date).toLocaleString()}</span>
      </div>
      <div className="content">{content}</div>
    </div>
  );
};

export default DiaryItem;

 

 

 

 

 

 

 

 

 

 

2024. 01. 01 (월)