본문 바로가기

나야, 리액트 스터디

 (42)
[week 2] - 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 안녕하세요 웹파트 YB 김가현입니다 !2주차에는 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 이렇게 총 네 개의 챕터를 읽고 공부해봤는데요,공식 문서를 기반으로 내용을 정리해보았습니다 😋  조건부 렌더링조건에 따라 다른 항목을 표시해아할 때if문, && 및 ? : 연산자와 같은 자바스크립트 문법을 사용하여 조건부로 JSX를 렌더링할 수 있음If-else 문if (isPacked) { return {name} ✅;}return {name}; 코드가 길어지는 경향이 있어 가독성이 다소 떨어질 수 있다 &&return ( {name} {isPacked && '✅'} ); && 앞에 있는 조건이 참이라면 뒤의 표현식을 렌더링조건부 렌더링에 &&를 쓰지 말라고 ? ..
[week2] 순수 컴포넌트, 사이드 이펙트, 트리로서 UI 리액트는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트는 더 큰 UI 구조의 일부로 결합된다. 이 아티클에서는 순수 컴포넌트(Pure Component)와 리액트 애플리케이션의 트리 구조로서의 UI를 이해하는 데 초점을 맞춰 보겠습니다.순수 컴포넌트란?순수 컴포넌트는 주어진 props와 state에 따라 항상 동일한 출력(렌더링 결과)을 반환하는 컴포넌트이다. 순수 컴포넌트는 같은 입력값이 주어졌을 때 같은 결과를 제공하기 때문에 불필요한 리렌더링을 방지하여 성능을 최적화할 수 있다. 컴포넌트 순수성을 위반한 컴포넌트 예시let person = 0;function Web() { person = person + 1; return 물결 웹 #{cnt}명;}export default function SOPT..
[week2] 순수 컴포넌트 안녕하세요 웹파트 YB 김다현입니다 😊 이번 2주차에는 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 이렇게 총 네 개의 챕터를 읽고 공부해봤는데요! 조건부 렌더링과 리스트 렌더링은 나름 빠르게 이해한 반면 순수 컴포넌트는 이해하는 데 조금 시간도 걸렸고, 아직 이해하지 못한 부분도 있는 것 같아 이번 아티클에서 다뤄보며 더 공부해보려고 해요 ⊹꒰⍢⑅ ꒱꙳ (트리 UI도 기회가 된다면 추가를...) 그리고 저는 사실 리액트 개념이 부족해서... 우선 공식문서를 최대한 쉽게 풀어내서 설명하는 거에 초점을 맞춰서 작성해볼게요!❄️ 순수 컴포넌트리액트에서 순수한 컴포넌트라는 건 항상 같은 입력이 들어오면 같은 결과를 보여주는 컴포넌트예요.커피를 만들 때 레시피가 있다면 같은 ..
[week2] - 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI 안녕하세요! 웹 35기 한수정입니다.이번 나리스 2주차 아티클의 주제는 조건부 렌더링, 리스트 렌더링, 컴포넌트를 순수하게 유지하기, 트리로서의 UI입니다. 모든 개념을 아직 완벽히 알고 있진 않아, 하나씩 차근차근 알아보고 정리해보려고 합니다. 조건부 렌더링과 리스트 렌더링은 예시 코드를 중심으로 알아보고 컴포넌트를 순수하게 유지하기와 트리로서의 UI는 공식문서를 중심으로 정리해보겠습니다...😊 나리스 모두 파이팅! 🙌 조건부 렌더링조건부 렌더링(Conditional Rendering)은 특정 조건에 따라 UI 컴포넌트를 화면에 표시하거나 숨기는 방식입니다. React는 if 문, && 및 ?: 연산자와 같은 자바스크립트 문법을 사용하여 조건부로 JSX를 렌더링할 수 있습니다.조건부 렌더링 구현 방..
[week 1] 리액트 컴포넌트와 JSX 안녕하세요! 물결웹팟 OB 박채연입니다 😋나야, 리액트 스터디 1주차 주제가 바로 컴포넌트, JSX, props 인데요.저는 이 주제 중, 컴포넌트와 JSX에 대해 자세히 알아보도록 하겠습니다!* 모든 내용은 리액트 공식문서를 기반으로 작성했습니다.  [1] 컴포넌트아주 기본적인 질문이지만, 컴포넌트란 무엇일까요?공식문서에서는 컴포넌트를 ‘마크업으로 뿌릴 수 있는 JavaScript 함수로, 앱에서 재사용 가능한 UI요소’라고 정의하고 있습니다.제가 앱잼 때 만든 서비스를 가져와서 컴포넌트에 대한 개념을 더 알아보겠습니다 ◠ ̫◠상세하게 컴포넌트를 어떻게 쪼개서 구성할지는 팀 기준에 따라 다르겠지만, 컴포넌트를 앱에서 재사용 가능한 UI요소라는 의미로 봤을 때 상단에 있는 카테고리도 컴포넌트라 할 수 ..
[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 관리가 가능함 ..

티스토리툴바