Input Enter 이벤트처리

const [keyword, setKeyword] = useState('');

const onClick = (keyword) => {
    console.log('enter 누름', keyword);
    dispatch(loadPostsInitAction());
    dispatch(loadSearchPostsAction({ page, keyword }));
  };

  const onKeyPress = (e) => {
    //e.preventDefault();
    //console.log('e', e);
    if (e.key == 'Enter') {
      onClick(keyword);
    }
  };

  const handleInput = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);
    //computed property names 문법(키 값 동적할당)
    setKeyword(e.target.value);
  };

return (
    <>
      <SearchLayout />
      <StyledSearchContainerDiv>
        <StyledSearchDiv>
          <SearchOutlined style={{ position: 'absolute', fontSize: '2rem', left: '10px', zIndex: '1', top: '1rem' }} />
          <Input
            placeholder="검색어를 입력하세요."
            className="search-Input"
            onKeyPress={onKeyPress}
            value={keyword}
            onChange={handleInput} //리액트는 이렇게 안 하면 못 적음 항상 불변성을 신경쓰기 때문에 
            name="keyword"
          />
        </StyledSearchDiv>

        {Array.from('fooooooooooo').map(() => (
          <PostBox />
        ))}
      </StyledSearchContainerDiv>
    </>
  );

https://kmhan.tistory.com/315