728x90 300x250 SMALL Front-end/React78 클래스 컴포넌트 기본문법 클래스 컴포넌트를 정의할 때는 Componet를 상속 받아야 하며, render 메서드 내에 JSX를 반환하여 UI를 구성한다.class 클래스명 extends Component { constructor(props) { super(props); this.state = {}; // 상태를 초기화 } render() { return ( {/* JSX를 넣는다. */} ); }} 2024. 11. 17. 리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유 리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유는 각각의 방식이 개발의 필요와 발전에 따라 다른 장점과 사용성을 제공하기 때문이다. 1. 초기 리액트 : 클래스형 컴포넌트의 등장리액트가 처음 등장했을 때, 컴포넌트의 상태 관리와 생명주기 메서드 등을 사용하려면 클래스형 컴포넌트를 사용해야 했다. 당시 함수형 컴포넌트는 단순히 UI를 반환하는 역할만 할 수 있었다.그래서 클래스형 컴포넌트가 리액트에서 기본으로 많이 사용되었고, 상태 관리와 복잡한 로직이 필요한 컴포넌트는 클래스로 작성되었다. class MyComponent extends React.Component { constructor(props) { super(props); this.state = {.. 2024. 11. 16. 컴포넌트 추출 컴포넌트 합성과는 반대로 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수 있다. 기능단위로 구분하는 것이 좋고, 재사용이 가능한 형태로 추출하는 것이 좋다. 컴포넌트 추출은 큰 컴포넌트를 작고 재사용 가능한 컴포넌트로 나누는 과정을 의미하며 이를 통해 가독성을 높이고 유지보수를 쉽게 할 수 있다. 큰 컴포넌트function UserProfile() { const user = { name: "Alice", age: 28, bio: "안녕하세요! 저는 웹 개발자입니다.", }; return ( {user.name} 나이: {user.age} 소개: {user.bio} );}// 렌더링ReactDOM.render( , document... 2024. 11. 15. 컴포넌트 합성 여러개의 컴포넌트를 합쳐서 하나의 컴포넌트로 만드는 것컴포넌트 안에 또 다른 컴포넌트를 사용할 수 있다. function App() { return ( 첫 번째 카드 이것은 첫 번째 카드의 내용입니다. 두 번째 카드 이것은 두 번째 카드의 내용입니다. 세 번째 카드 이것은 세 번째 카드의 내용입니다. );}// 렌더링ReactDOM.render( , document.getElementById('root')); 2024. 11. 14. 이전 1 ··· 14 15 16 17 18 19 20 다음 728x90 반응형 LIST