[REACT] 리스트 렌더링: 데이터 배열을 컴포넌트로 변환하기

기본 리스트 렌더링React 컴포넌트 내에서 배열의 각 항목을 반복하여 렌더링하려면 JavaScript의 map() 함수를 주로 사용합니다. 이 메서드는 배열의 각 요소를 새로운 값(여기서는 JSX 요소)으로 변환한 후, 새로운 배열을 반환합니다.export default function SubjectList() { const subjects = [ { id: 's1', name: '수학' }, { id: 's2', name: '과학' }, { id: 's3', name: '영어' } ]; const subjectItems = subjects.map((subject) => ( {subject.name} )); return ( 수강 과목 ..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 10.
• textsms

[REACT] 조건부 렌더링으로 동적 UI 구현하기

조건부 렌더링이란?조건부 렌더링은 특정 조건에 따라 컴포넌트가 서로 다른 JSX를 반환하도록 설계하는 기법입니다. React의 선언적 특성과 JavaScript의 유연성을 결합해, 코드 내에서 UI의 동적 변화를 자연스럽게 구현할 수 있습니다.if/else 문으로 조건 분기가장 간단한 방법은 if/else 문을 사용해 조건에 따라 다른 JSX를 반환하는 것입니다.function WelcomeMessage({ isLoggedIn, username }) { if (isLoggedIn) { return ( 환영합니다, {username}님! 오늘도 즐거운 하루 보내세요. ); } return ( 로그인이 필요합니다 계정에 ..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 10.
• textsms

[REACT] Props를 활용한 컴포넌트 간 데이터 전달

Props란 무엇인가?props는 "properties"의 줄임말로, 컴포넌트에 전달되는 인수로 생각할 수 있습니다. JSX에서 HTML 속성과 비슷한 방식으로 작성되며, 부모 컴포넌트가 자식 컴포넌트에 데이터를 넘겨줄 때 사용됩니다. 이때 props는 오직 읽기 전용이며, 컴포넌트 내부에서 변경할 수 없습니다.Props로 데이터 전달하기가장 기본적인 props 사용법은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 것입니다.function BookCard({ title, author, price = 10000 }) { return ( {title} 저자: {author} 가격: {price.toLocaleString()}원 );}export defaul..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 10.
• textsms

[REACT] JSX에서 중괄호로 JavaScript 표현식 다루기

중괄호의 역할JSX는 기본적으로 HTML처럼 보이지만, 중괄호를 사용하면 JavaScript를 사용할 수 있습니다.변수와 문자열의 동적 조합가장 기본적인 활용법은 변수 값을 JSX에 삽입하는 것입니다. 속성에 고정된 문자열은 따옴표로 작성하지만, 동적인 값은 중괄호로 감싸 전달합니다.export default function DynamicImage() { const imageSrc = "https://example.com/sunset.jpg"; const caption = "석양의 아름다움"; return ( {caption} );}컴포넌트 내부에서 JavaScript 함수 호출중괄호는 단순 변수 참조뿐 아니라, 함수 호출 결과도 삽입할 수 있습니다.export ..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 6.
• textsms

[REACT] JSX와 함께하는 마크업 작성

JSX란 무엇인가?JSX는 JavaScript XML의 줄임말로, JavaScript 코드 내에서 HTML과 유사한 문법으로 UI를 작성할 수 있게 해주는 문법 확장입니다. React에서는 컴포넌트를 일반 JavaScript 함수로 정의하지만, JSX를 통해 그 함수 안에서 UI 구조를 직관적으로 선언할 수 있습니다.HTML과 JSX의 핵심 차이점단일 루트 요소: JSX는 여러 요소를 반환할 때 반드시 하나의 부모 요소로 감싸야 합니다. 처럼 물리적인 컨테이너를 사용할 수도 있고, 불필요한 DOM 노드를 피하려면 Fragment (...)를 활용할 수도 있습니다.모든 태그는 닫혀야 함: HTML에서는 이나 같은 태그를 닫지 않아도 되지만, JSX에서는 반드시 나 처럼 자기 닫힘(Self-closing)..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 6.
• textsms

[REACT] 컴포넌트 분리와 재사용

컴포넌트 분리의 필요성React 애플리케이션에서 컴포넌트를 하나의 파일에 모두 작성하면 코드가 길어지고, 특정 기능을 수정하거나 디버깅할 때 불편함이 커집니다. 컴포넌트 분리의 이점가독성 향상: 각 파일이 하나의 역할만 담당하므로 코드를 읽고 이해하기 쉬워집니다.재사용 극대화: 동일한 컴포넌트를 여러 곳에서 활용할 수 있어 중복 코드를 줄입니다.유지보수성 강화: 특정 컴포넌트 수정 시 다른 부분에 영향을 주지 않고 작업할 수 있습니다.컴포넌트 분리와 모듈화의 기본단계새 파일 생성: 각 컴포넌트를 별도의 JavaScript 파일을 생성합니다.컴포넌트 내보내기: export 키워드를 사용해 컴포넌트를 외부에서 사용할 수 있도록 설정합니다.컴포넌트 가졍괴: 필요한 파일에서 import를 통해 컴포넌트를 불러와..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 6.
• textsms