반응형 react6 리액트 React | React: Props 및 State ⭕ 리액트 React | React: Props 및 State 프런트엔드 개발을 위한 JavaScript 라이브러리 ➡️ Virtual DOM 자바스크립트 객체 복제본: DOM 노드 트리의 경량화된 복사본, 실제 DOM보다 빠른 연산 가능 diffing 알고리즘: 이전과 현재의 Virtual DOM을 비교하여 실제 DOM에 반영해야 할 변경사항을 파악 배치 업데이트 기능: 변경사항을 모아두었다가 한 번에 실제 DOM에 적용하여 성능 최적화 ➡️ render() 컴포넌트의 렌더링: 컴포넌트가 호출될 때 실행되며, Virtual DOM을 생성하고 업데이트 결정 순수 함수: props나 state의 변경에 따라 결과가 결정됨 렌더링 단계: 'render phase'에서 Virtual DOM 생성 및 비교, '.. 2024. 3. 9. 리액트 React | 조건부 렌더링(Conditional Rendering) ✅ 조건부 렌더링(Conditional Rendering) React에서는 상태(State)에 따라 컴포넌트를 조건부로 렌더링 할 수 있습니다. 이를 통해 애플리케이션의 상황에 맞게 필요한 컴포넌트만 보여주거나 숨길 수 있습니다. 조건부 렌더링은 JavaScript의 조건 처리와 유사하게 동작합니다. 조건부 연산자나 if 문을 사용하여 현재 상태에 따라 UI를 업데이트할 수 있습니다. 💡 사용자 로그인 상태에 따른 조건부 렌더링 사용자의 로그인 상태에 따라 다른 인사말을 보여주는 컴포넌트입니다. 다음은 로그인된 사용자에게는 "Welcome back!"을, 로그인되지 않은 사용자에게는 "Please sign up."을 보여주는 두 개의 컴포넌트입니다. function UserGreeting(props) {.. 2023. 7. 6. 리액트 React | HTTP 클라이언트 데이터 통신: Ajax, Fetch, Axios ✅ HTTP 클라이언트(Client) 리액트(React)는 사용자 인터페이스를 구축하는데 초점을 두고 있어, 서버와 데이터를 주고받는 기능(HTTP 클라이언트)을 포함하지 않는다. 리액트(React)에서 서버와의 데이터 통신을 위해서는 별도의 HTTP 클라이언트를 사용해야 한다. 클라이언트와 서버는 개별적인 메시지 교환에 의하여 통신한다. HTTP 클라이언트는 HTTP 프로토콜을 사용하여 서버로부터 정보를 요청(requests)하고, 서버는 요청에 따라 적절한 응답(responses)을 반환한다. 리액트(React)에서 API 요청을 할 때 페이지를 새로고침하지 않고 데이터를 가져오기 위해 Axios나 Fetch 라이브러리를 사용한다. 💡 HTTP, HyperText Transfer Protocol HT.. 2023. 5. 19. 리액트 React | 노마스 코더 영화 평점 웹서비스 | 컴포넌트 생명주기 함수: 마운트, 업데이트, 언마운트, 에러 처리 ✅ 생명주기 함수 컴포넌트가 생성, 업데이트, 소멸될 때 호출되는 일련의 메서드이다. 생명 주기 함수를 통해 컴포넌트의 동작을 제어하고, 상태를 갱신하거나 데이터를 가져온다. 함수 실행 순서 constructor() 함수: 컴포넌트가 생성될 때 호출되며, 초기화 작업을 수행한다. static getDerivedStateFromProps() 함수: 컴포넌트가 생성될 때와 업데이트될 때 호출되며, 프로퍼티 값을 상태 값으로 변환을 수행한다. render() 함수: 컴포넌트의 UI를 생성하고 반환을 수행한다. componentDidMount() 함수: 컴포넌트가 마운트 된 후에 호출되며, 초기화 및 네트워크 요청 등의 작업을 수행한다. shouldComponentUpdate() 함수: 컴포넌트가 업데이트될 때.. 2023. 4. 3. 리액트 React | 컴포넌트 간 데이터 전달을 위한 속성(props) ✅ 속성(Props) React는 컴포넌트 간에 데이터를 전달하는 메커니즘으로 속성(Props)을 제공합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. Props는 읽기 전용이므로 하위 컴포넌트에서는 Props 값을 수정할 수 없습니다. 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로만 흐르기 때문에 Props를 사용하여 컴포넌트에 필요한 데이터와 이벤트 핸들러를 전달할 수 있습니다. 💡 속성(Props)의 읽기 전용성 React 컴포넌트에서 함수형 컴포넌트나 클래스형 컴포넌트 모두 Props는 읽기 전용입니다. 함수형 컴포넌트에서는 Props를 함수의 매개변수로 받아와 사용하며, 클래스형 컴포넌트에서는 this.props를 통해 Props를 사용합니다. Props는 항.. 2023. 3. 26. 리액트 React | React 웹 개발 환경 구축: Node.js, npm, npx ✅ React 웹 개발 환경 React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. React를 개발하기 위한 환경을 구축하는 것은 프로젝트를 시작하는 첫 단계입니다. 이러한 환경을 구성하기 위해 다음과 같은 도구들이 사용됩니다. 💡 Node.js Node.js는 Chrome V8 JavaScript 엔진으로 구동되는 오픈소스 자바스크립트 런타임 환경입니다. Node.js는 서버 측 자바스크립트 실행을 위한 플랫폼으로 사용되며, React 개발에서는 바벨(Babel)과 웹팩(Webpack)과 같은 도구들을 사용하기 위해 필요합니다. Node.js는 비동기 이벤트 기반의 입출력 모델을 사용하여 가볍고 효율적인 네트워크 애플리케이션 개발을 가능하게 합니다. Babel: B.. 2023. 3. 7. 이전 1 다음 반응형
