3주차 (26) 썸네일형 리스트형 컴포넌트 순수하게 유지하기 컴포넌트를 엄격하게 순수함수로 작성하면 예상밖의 동작이나 당황케하는 버그를 피할 수 있다. 💡 순수성: 공식으로서의 컴포넌트순수함수의 특징함수 밖 객체나 변수를 변경하지 않음같은 입력엔 항상 같은 결과를 반환함React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정하고 설계되었다.=>React 컴포넌트에 같은 입력이 주어지면 같은 JSX를 반환 💡 사이드 이펙트: 의도하지 않은 결과React의 렌더링 과정은 항상 순수해야 한다. 컴포넌트는 렌더링하기 전에 존재했던 객체나 변수들을 변경하지 말아야 한다.ex)let guest = 0;function Cup() { // 나쁜 지점: 이미 존재했던 변수를 변경하고 있다! guest = guest + 1; return Tea cup for guest.. 명령형 프로그래밍과 선언형 프로그래밍 안녕하세요 ~! 웹 파트 35기 한수정입니다. 이번 주에는 명령형 프로그래밍과 선언형 프로그래밍에 대해 정리해보려고 합니다. 사실 2주차 세미나에서 실습을 하면서 props라는 개념이 신기하고 더 공부하면 좋을 것 같아서 props와 관련한 글을 써볼까 고민했는데요, 세미나 시간에 웹팟짱님께서 선언형과 명령형 프로그래밍에 대해 알아두면 더욱 도움이 될 거라고 추천해주신 게 떠올랐습니다. 또, 아직 명령형 프로그래밍과 선언형 프로그래밍에 대해서도 잘 모르고 있어 이점부터 잡고 가면 좋을 것 같아, 이번 주제는 이 두 가지 프로그래밍 방식으로 정하게 되었습니다.프론트엔드 개발에서는 사용자 경험을 향상시키기 위한 다양한 기술과 접근 방식이 존재합니다. 그중에서도 명령형 프로그래밍과 선언형 프로그래밍은 프론트.. React에서 중복 로직을 해결하는 법 안녕하세요! 웹 OB 김채현입니다. React로 개발을 하다 보면, 여러 컴포넌트에서 반복적으로 사용되는 로직을 만나게 됩니다.그런데 컴포넌트마다 중복된 코드를 계속해서 작성하다 보면 유지보수도 어려워지고 코드도 지저분해질 수 있습니다.예를 들어, 로딩 상태를 처리하거나 특정 조건에 따라 컴포넌트를 보여줘야 할 때,일일이 각 컴포넌트에 이 로직을 추가하는 대신 "깔끔하고 효율적인 방법이 없을까?" 하는 고민을 하게 됩니다. 이러한 고민을 해결하기 위해서 중복 로직을 관리하기 위해!이번 아티클에서는 고차 컴포넌트의 구조와 활용 사례를 살펴보며, 왜 고차 컴포넌트가 유용한지에 대해 함께 알아가 보겠습니다. 💡 고차 컴포넌트가 궁금해요!고차 컴포넌트(HOC, Higher Order Component)는 컴포.. [React] children prop과 친해지자 안녕하세요 YB 이진혁입니다!이번에는 react prop 중 특별한 친구 children에 대한 아티클입니다. 개념을 대충만 알고 있었던 children의 정확한 정의가 무엇인지, 그리고 어떻게 사용하면 좋을지 내부를 조금 더 자세히 들여다보고자 합니다. 🌊 children이란 무엇인가?children은 컴포넌트의 데이터 전달 개체인 props의 일종이다. 컴포넌트가 다른 컴포넌트를 포함할 때, 그 안에 들어가는 내용을 모두 children으로 접근할 수 있다. 즉 일반적인 props처럼 정적인 데이터가 아니라 동적인 데이터를 컴포넌트 간에 넘겨줘야 하는 상황이 있다면 바로 이 children으로 접근이 가능하다. 텍스트로 설명하기보다 바로 코드 예시로 살펴보자.import Webby from '... React Dev Tools? 이것 뭐예요~?? 안녕하세요 웹 YB 김다현입니다! 혹시 다들 React 개발자 도구에 대해서 들어보셨나요?저는 놀랍게도 미미나를 들으면서 이 툴의 존재를 처음 알았답니다... 그래도 지금이라도 알게 해주신 전 팟장님께 감사인사를...저는 지금까지 어떤 개발을 해온 걸까요 ㅎㅎ? 역시 알아도 알아도 끝이 없는 리액트네요 😮💨 그런 김에! 이 아티클을 작성하면서 저도 직접 설치해보고, 어떤 기능이 있는지 알아보려고 합니다.혹시 저처럼 이번에 처음 알게 된 웨비들이 있다면 같이 설치하고 공부해봐요 🫶 ⚡ React Dev Tools?리액트로 개발하다 보면 내가 만든 컴포넌트들이 지금 어떻게 상태를 주고받고 있는 건지 등등이 궁금할 때가 많지 않나요?! 이때 이 툴을 쓰면 정말... 큰 도움이 될 것 같더라구요. 리액트.. DOM과 React 랜더링 안녕하세요. Web YB 김고은입니다.이번 주제는 React의 랜더링 방식과, DOM에 대해서 다뤄보고자 합니다. 특히, react의 랜더링 방식을, JavaScript와 비교하여 왜 요즘의 FE 기술로 react를 사용하는지 살펴보고자 합니다. 1. 브라우저의 랜더링 과정 우선 두 방식을 살펴보기 전에 프론트엔드 개발을 공부하고 있는 만큼 가장 기본인 브라우저 랜더링 과정을 정리하자면 다음과 같다.`HTML 파싱 => DOM 트리 생성` ➡️ `CSS 파싱 => CSSOM 트리 생성` ➡️ `DOM과 CSSOM 결합을 통해 => 랜더 트리 생성` ➡️`JS 파싱 => AST => 바이트코드로 변환 후 실행 (필요시 DOM이나 CSSOM로 변환되고 랜더트리에 반영)` ➡️`레이아웃 (요소의 위치와 .. 리액트 Hooks - useState, useEffect 안녕하세요 YB 최정완이에요많이 쓰이는 useState, useEffect 훅에 대해 같이 알아보아요 [들어가기]React에서 훅(Hook)은 함수형 컴포넌트에서 상태와 라이프스타일 기능을 사용할 수 있도록 해주는 함수에요라이프스타일 메서드(Lifecycle Methods)는 컴포넌트가 생성되고 업데이트되며 제거되는 과정에서 특정 시점에 호출되는 메서드들을 의미해요. 이 기능은 컴포넌트의 상태를 관리하거나 부수 효과를 처리하는 데 도움을 줘요. 1. useState()useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해주는 훅이에요.useState를 사용하면 상태 변수와 상태를 갱신하는 함수를 생성할 수 있어요. import React, { useState } from 'react';func.. 리액트 개발자 도구로 개발력 향상시키기 안녕하세요 웹파트YB 강민하 입니다 ! 😄리액트 만능 도구인 리액트 개발자 도구만 있으면 개발력이 쭉쭉 향상된답니다.1. 리액트 개발자 도구란?리액트 개발자 도구(React Developer Tools) 는 리액트를 개발하며 디버깅, 성능 프로파일러, 컴포넌트 탐색, 등등등 여러가지 편의 기능을 제공하는 웹 브라우저의 확장 프로그램이다. https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created fro.. 이전 1 2 3 4 다음
