REACT12 React 조건부 렌더링: 설명과 예제 React에서 조건부 렌더링은 특정 조건에 따라 서로 다른 컴포넌트를 렌더링하는 방법이다. JavaScript의 조건문을 사용하여 구현할 수 있으며, React의 선언적인 특성을 활용하여 UI의 다양한 부분을 효과적으로 표시하거나 숨길 수 있다. if문과 if-else문 : 가장 기본적인 형태로, 컴포넌트의 render 메서드 또는 함수형 컴포넌트 내에서 if 문을 사용하여 조건에 따라 다른 컴포넌트를 반환한다. function Welcome(props) { if (props.isLoggedIn) { return Welcome back!; } else { return Please sign up.; } } 논리 && 연산자 사용: React에선 {} 안에 JavaScript 표현식을 넣을 수 있다. && .. 2024. 3. 24. React의 이벤트 처리 소개 React의 이벤트 핸들링은 컴포넌트 내에서 사용자 상호작용을 처리하는 식이다. React 애플리케이션에서 이벤트 처리 등 이벤트 시스템을 이해하고 적절히 사용하면, 효율적이고 반응이 빠른 UI를 만들 수 있다. React에서 이벤트를 처리하는 방법은 HTML과 유사하지만 차이점이 있다: React 이벤트 핸들러는 camelCase를 사용한다. 예시로, HTML의 onclick 은 React에서 onClick 이 된다. JSX를 사용하여 문자열이 아닌 함수를 이벤트 핸들러로 전달한다. // handleClick은 해당 클래스의 메서드 Click me 이벤트 핸들러는 컴포넌트의 메서드로 정의된다. 클래스 컴포넌트에서의 이벤트 핸들러: class MyComponent extends React.Componen.. 2024. 3. 23. 함수형 컴포넌트와 Hooks 이해를 위한 React 라이프사이클 메서드 소개 React의 라이프사이클 메서드는 React 컴포넌트가 생성되고 업데이트되고 소멸되는 과정에서 호출되는 일련의 메서드들이다. 각 메서드는 컴포넌트의 생명주기의 특정 시점에 자동으로 호출되며, 이를 통해 개발자는 컴포넌트의 상태를 관리하고, 렌더링 전후의 작업을 수행할 수 있다. 함수형 컴포넌트와 Hooks를 사용할 경우, 아래에 소개할 라이프사이클 메서드 대신 useEffect 와 같은 Hook을 사용하여 비슷한 기능을 구현할 수 있다. 프로젝트에는 함수형 컴포넌트 위주로 작성할 것이기에, 개념만 짚고 넘어가겠다. React 라이프사이클은 크게 마운팅, 업데이트, 언마운팅의 세 단계로 나눌 수 있다. 마운팅(Mounting) >> 마운팅은 컴포넌트가 처음 DOM에 삽입될 때 발생한다. 주로 사용되는 메서.. 2024. 3. 23. React Hooks 개념과 예제 React Hooks는 React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서 상태 관리 및 다른 React의 기능들을 사용할 수 있게 해준다. 이전에는 상태 관리나 생명주기 기능을 사용하기 위해서 클래스형 컴포넌트를 사용해야 했지만, Hooks 의 도입으로 함수형 컴포넌트에서도 이러한 기능들을 사용할 수 있게 되었다. Hooks는 함수형 컴포넌트의 기능을 크게 확장시켰으며, React 개발에 있어서 핵심이다. HOok은 각 시나리오에 적합하게 설계되어 있어서, 적절히 활용하면 React 개발의 생산성과 성능을 크게 향상시킬 수 있다. 주요 Hooks >> useState: 가장 기본적인 Hook. 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해준다. 클래스 컴포넌트에서 this.stat.. 2024. 3. 23. 이전 1 2 3 다음
