개발새발

리액트에서 UI를 만들 때 사용하는 JSX는, 얼핏 보면 HTML과 비슷하지만 자바스크립트와 섞여 있는 특별한 문법이다.이 문법을 제대로 이해하면 더 깔끔하고 실수 없는 컴포넌트를 만들 수 있다. ✅ JSX에서 값 렌더링하기JSX에서는 중괄호 {}를 이용해 자바스크립트 값을 태그 안에 넣을 수 있다.const name = '댕주';const Hello = () => 안녕하세요, {name}입니다!;이렇게 하면 name 변수에 들어있는 값이 화면에 그대로 렌더링된다.1. 중괄호 안에는 표현식만 쓸 수 있다.표현식 = 값을 생성하는 코드✔️ 가능: 변수, 숫자 계산, 삼항 연산자 등❌ 불가: if, for, while 같은 문장(statement){user.age > 20 ? '성인' : '미성년자'} //..

리액트는 UI를 컴포넌트 단위로 구성한다.컴포넌트는 쉽게 말해 "화면을 구성하는 작은 조각"이다. 버튼 하나, 헤더 하나, 목록 하나도 모두 컴포넌트다.✅ 함수 컴포넌트란?가장 일반적인 방식은 "함수(function)"을 이용해서 컴포넌트를 만드는 것이다.예를 들어, 헤더 컴포넌트를 만든다면 다음과 같이 작성할 수 있다.// 함수 선언식function Header() { return 헤더 입니다}// 화살표 선언식const Header = () => { return 헤더 입니다}; 함수 선언식, 화살표 선언식 모두 기능은 동일하기 때문에 익숙한 방식으로 사용하면 된다.클래스를 이용해서 선언할 수 있지만 코드가 복잡해져서 함수 방식이 일반적으로 사용된다.✅ 함수 컴포넌트의 return 문법 - ..

객체지향(Object-Oriented Programming, OOP)프로그램을 객체(Obejcts)라는 독립적 단위들로 나누고,이 객체들이 서로 상호작용하며 전채 시스템을 구성하도록 설계하는 프로그래밍 패러다임이다. 객체지향의 핵심 개념객체 (Object)▶ 객체는 데이터(속성)와 기능(메서드)를 가진 프로그램의 독립적 단위이다.▶ 예를 들어, 자동차 라는 객체에는 색상, 모델명 같은 속성이 있고, 운전하다(), 정지하다() 와 같은 기능이 있을 수 있다.클래스 (Class)▶ 클래스는 객체를 생성하기 위한 설계도이다. 객체의 속성과 기능을 정의한다.▶ 예를 들어, 자동차 라는 클래스를 만들어두면, 이 클래스를 통해 다양한 자동차 객체(예: 빨간 자동차, 파란 자동차)를 생성할 수 있다.상속 (Inher..