[React] Hooks - useEffect

useEffect란 무엇인가?React의 useEffect Hook은 컴포넌트가 렌더링된 이후에 실행해야 하는 부수 효과(side effects)를 처리하는 데 매우 중요한 역할을 한다. useEffect는 주로 데이터 페칭, DOM 조작, 구독 및 타이머 설정 등과 같은 비동기 작업이나 기타 비정규적인 작업을 관리하기 위해 사용된다.클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드들을 함수형 컴포넌트에서 대체하기 위한 용도로 도입되었다.useEffect 사용방법useEffect는 렌더링 이후에 비동기적으로 실행되며 두 가지 개념을 포함한다.렌더링 후 실행: useEffect는 DOM이 화면에 완전히 렌더링된 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms

[react] Hooks - useState

React는 UI를 선언적으로 관리할 수 있는 컴포넌트 기반 라이브러리이다. 그 중에서도 상태(State)는 동적인 데이터를 관리하는 데 중요한 역할을 한다. 이때 상태를 쉽게 관리할 수 있도록 도와주는 것이 useState 훅이다. useState란 무엇인가?useState는 함수형 컴포넌트에서 상태를 관리하기 위한 React hook이다. React 16.8 버전에서 등장한 이 훅은 기존의 클래스형 컴포넌트에서 상태를 관리하던 방식에서 벗어나 함수형 컴포넌트에서도 쉽게 상태를 선언하고 변경할 수 있게 한다.const [state, setState] = useState(initialState);/* state: 현재 상태의 값을 저장하는 변수setState: 상태를 변경하는 함수initialState:..

• format_list_bulleted Frontend/React
• · 2024. 9. 21.
• textsms

[React] 리액트의 렌더링 구조

리액트 렌더링?React는 UI를 업데이트하고 유지하는 효율적인 방식을 제공하는 라이브러리이다. 렌더링은 React에서 컴포넌트의 상태(state) 또는 props가 변경될 때 UI를 업데이트하는 과정이다. React의 렌더링은 클래스형 컴포넌트와 함수형 컴포넌트에서 다르게 동작하여 각각 동작 원리를 알아보아야 한다. 최근에는 함수형 컴포넌트를 지향하고 있으며 공식 문서에서도 함수형 컴포넌트 방식을 권장한다. 렌더링 프로세스렌더링 촉발(Triggering a Render)컴포넌트 렌더링(Rendering the Component)DOM에 커밋(Committing to the DOM)리액트 공식 문서에서는 아래와 같은 비유로 설명하고 있다.렌더링 촉발: 손님의 주문을 주방으로 전달하는 단계입니다.컴포넌트 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 13.
• textsms

React 컴포넌트 (함수형 VS 클래스형)

React 컴포넌트리액트(React)에서 컴포넌트(Component)는 UI를 구성하는 재사용 가능한 독립적인 모듈이다.화면에 나타나는 각각의 독립적인 요소를 말한다.  예를 들어 버튼, 헤더, 푸터, 입력 폼 등 모든 것들이 컴포넌트로 만들어질 수 있다.컴포넌트 표현 방법리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나누어진다.함수형 컴포넌트가 더 간단하고 가독성이 좋아 선호하는 추세이다. 클래스형 컴포넌트 방식class MyClassComponent extends Component { render() { return {this.props.message}; }} 함수형 컴포넌트 방식const MyFunctionalComponent = (props) => { return {props...

• format_list_bulleted Frontend/React
• · 2024. 3. 30.
• textsms

JavaScript로 간단한 투두리스트 만들기

STEP1. 투두리스트의 기본 디자인과 기능 완성하기 주요 기능 투두리스트 추가하기 투두리스트 수정, 삭제 체크한 투두리스트 줄 긋기 디렉터리 구조 my-todo-list/ │ ├── src/ │ ├── js/ │ │ └── main.js │ ├── css/ │ │ └── main.css │ └── assets/ │ │ ├── index.html ├── README.md └── package.json 소스파일 index.html TODO 삭제 main.css body { font-family: sans-serif; } header img { position: relative; width: auto; left: -100px; top: 100px; } .todo-wrapper { position: relat..

• format_list_bulleted Frontend/JavaScript
• · 2024. 3. 11.
• textsms

React란?

React란?React.js는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로,재사용 가능한 컴포넌트를 기반으로 하는 선언적이고 효율적인 UI 개발을 가능하게 한다.가상 DOM을 사용하여 성능을 최적화하고, 단방향 데이터 흐름을 통해 애플리케이션의 상태 관리를 단순화하는데 용이하다.React는 프레임워크가 아닌 라이브러리이고메타(페이스북)와 개발자 커뮤니티에 의해 유지 관리되고 있다.React의 특징컴포넌트 기반 구조가상 DOM (Virtual DOM)단방향 데이터 흐름 (One-way Data Binding)JSX컴포넌트 기반 구조애플리케이션을 독립적이고 재사용 가능한 부분으로 나누어 코드의 유지 관리를 용이하게 하고,대규모 프로젝트의 개발 효율성을 향상시킨다.각..

• format_list_bulleted Frontend/React
• · 2024. 3. 6.
• textsms