리액트17 [처음 만난 리액트] React 책읽기 : Chapter 9-12 정리 [ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] ✅ 조건부 렌더링 (Conditional Rendering)조건에 따라 렌더링 결과가 달라지도록 하는 것🔹 1. 엘리먼트 변수리액트 엘리먼트를 변수처럼 저장해서 조건에 따라 선택적으로 렌더링 let button;if (isLoggedIn) { button = ;} else { button = ;}return {button};🔹 2. 인라인 조건▶ 인라인 If조건문을 코드 안에 직접 집어넣는 방식논리 연산자 && (AND) 사용앞의 조건이 true일 때만 뒤의 엘리먼트가 렌더링됨{isLoggedIn && }▶ 인라인 If-Else삼항 연산자 ? : 사용조건이 true면 첫 번째, false면 두 번째 항목을 렌더링서로 다른 두 가지.. 2025. 4. 7. [처음 만난 리액트] React 책읽기 : Chapter 6-8 정리 [ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] 🔹 React State 정리✅ State란?리액트 컴포넌트의 변경 가능한 데이터개발자가 직접 정의하여 사용State가 변경되면 컴포넌트가 재렌더링됨렌더링이나 데이터 흐름에 사용되는 값만 State에 포함해야 함🎯 State의 특징JavaScript 객체 형태직접 변경 불가능 → 반드시 지정된 방법(set 함수)으로 변경해야 함⚛️ 클래스 컴포넌트에서 State 사용법생성자에서 State를 한 번에 정의State 변경 시 setState() 함수 사용⚡ 함수 컴포넌트에서 State 사용법useState() Hook을 사용하여 각각의 State를 정의각 State별로 제공되는 set 함수를 사용하여 변경🔹 React 생명주기(Life.. 2025. 4. 4. [처음 만난 리액트] React 책읽기 : Chapter 0-5 정리 토스뱅크 멘토님 조언을 따라서 요즘 전공서적(?) 개발서적(?) 책들을 읽고 있는데,오래 기억하려면 내용을 요약해두면 좋을 것 같아 정리한다. 이 책은 입문자 기준이라, 설명이 꽤 자세하다.프론트엔드 개발자들은 개념을 탄탄히 다지는 데에 도움이 될 것 같다. 지금 읽고 있는건 React 도서랑 Node JS 도서인데,이번 달 내로 완독하고 Next JS와 Springboot 책도 읽어보고 싶다. 어릴 땐 책을 참 좋아했는데, 요즘은 읽을 시간이 많이 없어서 아쉽다 🤓📖요약은 깔끔하게 하려고 chatgpt의 도움을 받았다![ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] 🔹 웹 개발 기본 개념 정리🏗 HTML (HyperText Markup Language)웹사이트의 뼈대를 구성하.. 2025. 4. 4. [한경xToss] 6-7주차 요약 : React.js 심화, NodeJS 기초 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. React 기초List & Key리스트(List): 배열 데이터를 동적으로 렌더링하기 위해 사용되는 JSX 요소들의 집합 React에서는 배열의 각 항목을 JSX 엘리먼트로 변환하여 화면에 출력합니다.키(Key): 리액트에서 각 리스트 항목을 고유하게 식별하기 위해 사용하는 속성입니다. 키는 리액트가 어떤 요소가 변경되었는지, 추가되었는지, 제거되었는지를 빠르게 파악하여 DOM을 효율적으로 업데이트하는 데 중요한 역할을 합니다.Form리액트에서 입력폼(input form)은 사용자의 입력을 받아 상태(state)로 관리하는 중요한 요소입니다. 입력폼을 만들 때는 리액트의 상태(state)와 이벤트 핸들러를 사용하여 입력 데이터를 관리합니다.. 2025. 3. 20. [React] Redux 개념 및 역할, 파일 구조 디렉토링 개발을 처음 진행할 때는 리덕스 내용을 한 파일에다가 모아두다가,인턴 하면서 디렉토링 하는 방법을 배웠었는데 또 써먹을 일이 생겨 기록해둔다. Redux는 애플리케이션의 상태를 한곳에서 관리하는 라이브러리이다. 여러 컴포넌트에서 같은 데이터를 공유할 때 유용하다. 1️⃣ Redux 파일 구조 (in React typescript) /redux /actions # 액션 정의 (이벤트 발생 시 필요한 데이터 정의) categoryActions.ts /reducers # 리듀서 정의 (상태가 어떻게 변경될지 결정) categoryReducer.ts store.ts # 스토어 설정 (전체 상태 관리) 각 파일은 Redux의 핵심 요소인 액션(Acti.. 2025. 2. 27. [한경xToss] 5주차 요약 : React.js 기초 * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. 마크다운 파일 작성법git, github 사용법github desktop React.js 기초React는 웹 프레임워크로, JS 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨- facebook에서 제공해주는 프론트엔드 라이브러리- 컴포넌트 기반의 UI 라이브러리 명령형 프로그래밍 vs 선언형 프로그래밍명령형 프로그래밍: 명령형 프로그래밍은 컴퓨터에게 수행해야 할 작업을 순차적인 명령어들로 구성한 프로그래밍 방식입니다. 명령형 프로그래밍에서는 코드가 프로그램 상태를 변경하는 데 필요한 절차를 명시적으로 기술하며, 변수를 사용해 상태를 추적합니다. 대표적인 명령형 프로그래밍 언어로는 C, C++, Java, Python 등이.. 2025. 2. 18. 이전 1 2 3 다음 728x90 반응형
