리엑트를 사용하여 재사용 가능한 ui 만들기

버튼만들기

StyledButton

styled-components를 사용하여 스타일이 지정된 버튼 컴포넌트를 정의합니다. 버튼은 특정한 스타일 및 마우스 호버 시의 스타일 변경을 포함합니다.

Button

함수형 컴포넌트를 선언합니다. 이 컴포넌트는 title과 onClick이라는 props를 받습니다.

컴포넌트 내부에서는 StyledButton을 렌더링하며, 클릭 이벤트가 발생하면 onClick 함수를 호출합니다.

마지막으로 Button 컴포넌트를 내보냅니다.

 

버튼 컴포넌트 가져오기

useNavigate() 

훅을 사용하여 navigate라는 함수를 선언합니다. 이 함수는 React Router의 내장 함수로, 지정된 경로로 이동할 때 사용됩니다.

<Button> 

이 버튼은 "글 작성하기"라는 제목을 가지며, 클릭 이벤트가 발생하면 navigate("/post-write")가 호출됩니다. 이는 사용자가 버튼을 클릭할 때 "/post-write" 경로로 이동하도록 설정하는 것입니다

 

텍스트 박스 만들기

StyledTextarea

 styled-components를 정의합니다. 이 스타일은 텍스트 창의 너비, 높이, 패딩, 폰트 크기, 줄 높이 등을 정의합니다.

${(props) => ...}

 props에 따라 동적으로 스타일을 조정하는 부분입니다. 만약 props.height가 존재한다면, 해당 높이를 적용합니다.

TextInput

함수형 컴포넌트를 선언합니다. 이 컴포넌트는 height, value, 그리고 onChange라는 props를 받습니다.

컴포넌트 내부에서는 StyledTextarea를 렌더링하며, 받은 height, value, onChange props를 전달합니다.

 

텍스트 컴포넌트 가져오기

useState

훅을 사용하여 'title'과 'content'라는 두 개의 상태 변수를 선언합니다. 'title'은 글의 제목을 나타내고, 'content'는 글의 내용을 나타냅니다. 각각의 상태 변수는 초기값으로 빈 문자열("")을 가지고 있습니다.

TextInput

제목을 입력받으며, 'value' 속성으로 'title' 상태 변수를 사용하여 제어되고 있습니다. 사용자가 입력한 값을 변경할 때마다 'onChange' 이벤트 핸들러가 호출되어 'setTitle' 함수를 통해 'title' 상태를 업데이트합니다.