본문 바로가기

분류 전체보기

 (200)
[week 1] 리액트 컴포넌트와 JSX 안녕하세요! 물결웹팟 OB 박채연입니다 😋나야, 리액트 스터디 1주차 주제가 바로 컴포넌트, JSX, props 인데요.저는 이 주제 중, 컴포넌트와 JSX에 대해 자세히 알아보도록 하겠습니다!* 모든 내용은 리액트 공식문서를 기반으로 작성했습니다.  [1] 컴포넌트아주 기본적인 질문이지만, 컴포넌트란 무엇일까요?공식문서에서는 컴포넌트를 ‘마크업으로 뿌릴 수 있는 JavaScript 함수로, 앱에서 재사용 가능한 UI요소’라고 정의하고 있습니다.제가 앱잼 때 만든 서비스를 가져와서 컴포넌트에 대한 개념을 더 알아보겠습니다 ◠ ̫◠상세하게 컴포넌트를 어떻게 쪼개서 구성할지는 팀 기준에 따라 다르겠지만, 컴포넌트를 앱에서 재사용 가능한 UI요소라는 의미로 봤을 때 상단에 있는 카테고리도 컴포넌트라 할 수 ..
[JavaScript] 이벤트위임 안녕하세요 웹파트 배영경입니다🤗이번에는 자바스크립트의 이벤트위임에 대해 알아보았습니다! 2주차 과제를 구현할 때 각 체크박스마다 이벤트 리스너를 개별적으로 등록하는 방식을 사용하였는데, 많은 DOM 요소에 이벤트 리스너를 등록하면 성능상 좋지 않다는 것을 알게되었습니다. 이벤트 위임을 하면 상위 요소에서 이벤트를 처리하고, 이벤트가 발생한 요소에 맞게 로직을 처리할 수 있습니다. 이벤트 위임을 이해하기 위해서는 이벤트 버블링과 캡처링에 대한 이해가 필요합니다. 이벤트 캡처링(Event Capturing) 이벤트 캡처링은 이벤트가 최상위 요소에서부터 자식 요소로 전달되는 과정. 이벤트가 위에서부터 내려오는 방식으로 전파된다. 캡처링과 버블링 모두 기본적으로 발생하지만, 브라우저는 대부분 이벤트 버블링 방..
[week1] 컴포넌트 딥다이브 🌊 안녕하세요! 웹 파트 YB 김다현입니다. 1주차 아티클에서는 공식 문서 UI 표현하기의 컴포넌트 파트에 대해 작성해보려 합니다.기본 개념을 확실히 해야 한다고 생각해서 컴포넌트 관련 공식 문서를 한줄한줄 뜯어보려고 해요,,, 🧩 컴포넌트 리액트의 주 특징이 컴포넌트 기반의 구조라는 점이기 때문에 가장 중요하다고 생각하는 파트다. 컴포넌트란 React를 이루는 독립된 UI 조각인데 이를 통해  재사용성, 유지보수성 이 두 가지 SW 특성을 유지할 수 있다. React 컴포넌트는 마크업을 얹을 수 있는 JavaScript 함수입니다. React 컴포넌트는 그냥 UI를 보여주는 게 아니라, JavaScript 함수로 만들어진다. 여기서 JavaScript 함수가 UI를 만들어주는 역할을 한다고 생각하면 된다..
[week1] - 첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기 안녕하세요! 웹파트 YB 한수정입니다:)나리스의 1주 차 커리큘럼으로 첫 번째 컴포넌트, 컴포넌트 import 및 export 하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기에 대해 찾아보고 공부해 볼 수 있었습니다.  1주 차 아티클에서는 이 개념들 중에서도 컴포넌트, 컴포넌트 import 및 export 하기와 세미나 실습에서 코드를 작성해 보며 가장 흥미로웠던 컴포넌트에 props 전달하기에 대해 작성해 보겠습니다.  React의 컴포넌트 React 앱은 컴포넌트로 구성됩니다. 컴포넌트는 UI(사용자 인터페이스)의 특정 부분을 표현하며, 각각 고유한 로직과 모양을 가질 수 있습니다. 작은 버튼 컴포넌트부터 전체 페이지 컴포넌트까지 다..
[week 1] - UI 표현하기 (컴포넌트, JSX, props) 안녕하세요 ! 웸파트 YB 김가현입니다스터디 노션 세부 커리큘럼에 있는 1주차 파트 UI표현하기 - 첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기 부분에 해당하는 공식 문서를 읽고, 정리해보았습니다 👀⭐️ 컴포넌트컴포넌트란 무엇일까?재사용 가능한 UI 요소리액트는 컴포넌트 기반의 구조라는 특징을 가지며, 모든 페이지는 컴포넌트들의 조합으로 구성되어 있다 !컴포넌트를 정의하고 사용하는 방법컴포넌트를 정의하는 방법에는 클래스형, 함수형이 있으나 함수형을 권장하고 있다.가독성이 좋고 코드가 직관적메모리 자원 측면에서도 효율적Hooks를 통한 state 및 LifeCycle 관리가 가능함 ..
[week 1] 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기) 안녕하세요! 웹파트 OB 김건휘입니다. 이번 시간에는 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기)를 읽고 정리한 내용에 대한 아티클을 작성해보겠습니다.🌐컴포넌트란?컴포넌트는 리액트 앱을 구성하는 기본 단위로, 재사용 가능한 UI 조각을 말한다. 이 컴포넌트들은 각각 자체적인 렌더링 로직과 상태 관리를 가지며, 복잡한 UI를 구성하기 위해 서로 조합하고 재사용할 수 있습니다. 다음 사진과 같이 컴포넌트들를 조합하여 화면을 구성할 수 있다. 컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 여러 번 사용할 수 있다는 점이 바로 React의 킥이..
메모이제이션 - useCallback, useMemo + React.memo 안녕하세요, 웹파트 OB 공준혁입니다.  요즘 리액트가 개편되면서, 자동으로 렌더링 효율성을 챙길 수는 있다고는 하나, 메모이제이션에 대한 개념을 알고는 있어야 한다.💡 메모이제이션:이전에 계산한 값을 기억하여 재계산을 방지하는 기술. 함수나 값의 결과를 캐싱하여 동일한 입력에 대해 동일한 출력을 반환하도록 만든다. 이는 성능 향상과 코드의 최적화에 도움이 된다. 즉, 메모이제이션은 말 그대로 “기억” 한다는 의미이다.리액트에서는 컴포넌트 렌더링이 자주 일어나기 때문에, 불필요한 렌더링을 방지하기 위해“기억”하는 기술을 사용하는 것이 종종 필요하다. 대표적으로 useCallback, useMemo가 있다!use로 시작하는건 기본적으로 리액트 컴포넌트의 Hook이라고 생각하면 된다.useCallback,..
[week 1]- function Component ? class Component? 안녕하세요! YB 이윤지라고 합니다.리액트 첫 스터디인 만큼 무엇에 관한 주제로 아티클과 발표를 다뤄볼까 고민도 많이 했는데요!역시 리액트하면 떠오르는 건 컴포넌트 재사용성! 이 가장 많이들 떠오르실 거라고 생각합니다. ㅎㅎ아닌...아닌가? 그렇다고 해주세요. React Component 는 개념적으로는 JS 함수랑 비슷합니다.함수가 입력을 받아 출력을 return 하는 것처럼 React Component도 입력을 받아서 정해진 출력을 리턴하기 때문이죠.하지만 일반적인 JS 함수와는 조금 다른데요, JS의 입력과 출력이 말 그대로 '입력' 과 '출력' 이라면React Component 에서의 입력은 React Element 가 됩니다.바로 이렇게!   React Component 는 말 그대로,만들고자 ..

티스토리툴바