본문 바로가기

react component2

React - 합성 컴포넌트 적용해보기 (Modal) 컴포넌트 (Component) 컴포넌트는 React에서 UI를 그리는 최소한의 단위입니다. 컴포넌트를 만들 때 어떤 기준으로 만들어야 하는지는 개개인마다 다릅니다. 유연한 컴포넌트 만들기 우리들은 하나의 서비스를 만들면서 다양한 변화를 마주하게 됩니다. 어떤 기능이 추가되거나 삭제되거나 하는 다양한 변화에 대응해야 합니다. Headless 기반의 추상화하기 : 변하는것, 변하지 않는 것 구분하기 한 가지 역할만 하기 : 한 가지 역할로만 가지고 있는 것으로 조합 도메인 분리하기 : 도메인을 포함하는 컴포넌트와 그렇지 않은것 구분하기 Component UI 지금까지 사용해본 React UI 라이브러리는 두 가지 라이브러리입니다. 대표적인 Component UI 방식입니다. Antd MATERIAL-UI 라.. 2023. 9. 23.
React - 버튼 클릭으로 컴포넌트 렌더링하기 button 클릭으로 원하는 컴포넌트를 렌더링 할 수 있습니다! 지금은 버튼을 이용했지만 checkbox, radio, select 등 모두 사용 할 수 있는 방법입니다. 구현 해야 할 로직 파악해 보기 ! 어떠한 것을 구현할 때 가장 먼저 생각해야 하는 것은 로직을 생각하는 것이라고 생각합니다. 적용해야 할 로직을 나눈다면 이렇게 볼 수 있습니다. 버튼클릭 버튼 클릭한 버튼의 상태값 저장 상태값의 따른 컴포넌트 렌더링 state 선언, onClick 이벤트 선언 클릭한 버튼의 name 값을 state에 저장합니다. value가 될 수 있고, innerText 등 상황에 맞게 사용하면 됩니다. const [content, setContent] = useState(); const handleButtonCl.. 2023. 9. 23.