정방형 썸네일 메이커 제작기 - 1

벨로그에서 자주 보이던 썸네일 메이커들을 보고 리액트 연습을 위해 한번 따라 만들어보기로 했다.

제목, 부제목, 글쓴이 3가지를 받아 적는 형식으로 1:1 사이즈로 제작하였고 (블로그 썸네일 혹은 인스타그램을 위해 제작)

800*800 사이즈로 블로그에서는 사용 이후 크기를 조금 줄여야 할 것이며, 인스타그램에서는 1080*1080이 규격으로 크게 불편하지 않을 듯 하다.

개선사항
1. 리셋 버튼 클릭시 초기값이 value에도 들어감
2. 색상 변경이 불가능
3. 이미지 저장 버튼이 없음
4. 스타일을 조금 더 컴포넌트화 할 것
5. 하단 input 영역 가운데 정렬

주요 코드

const [text, setText] = useState({
    title: 'Title',
    content: 'Content',
    author: 'Author',
  });
  const { title, content, author } = text;

  const onChangeText = (e) => {
    const { name, value } = e.target;
    setText({ ...text, [name]: value });
  };

  const resetText = () => {
    setText({
      title: 'Title here',
      content: 'Content here',
      author: 'Author here',
    });
  };

객체화 하여 한번에 설정이 가능
이를 구조분해하여 각 값에 대한 설정이 가능하다. reset버튼으로 값을 다시 설정할 수 있음