[React] 컨포넌트에 props 전달 React 컴포넌트는 props를 이용해 서로 통신한다.모든 부모 컴포넌트는 props를 줌으로써 몇몇의 정보를 자식 컴포넌트에 전달할 수 있다.props는 HTML 어트리뷰트를 생각나게하지만, 객체, 배열, 함수를 포함한 모든 JS 값을 전달할 수 있다. props는 JSX 태그에 전달하는 정보이다.예를 들어 className, src, alt, width, height는 태그에 전달할 수 있다. 태그에 전달할 수 있는 props는 미리 정의되어 있다.아래애서 생성한 와 같은 어떠한 컴포넌트든 props를 전달할 수 있다.function Avatar() { return ( );}export default function Profile() { return ( );} 컴포넌트에 pr.. 2025. 5. 12. [React] JSX JSX는 "JavaScript XML"의 약자, JS를 확장한 문법으로 JS 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해준다.JSX 내에서는 중괄호를 사용해 JS 변수, 함수, 표현식을 자유롭게 삽입할 수 있다.하지만 JSX는 브라우저가 직접 이해하지 못하므로, Babel 같은 트랜스파일러가 JSX 코드를 일반 JS(React.createElement 등)로 변환한 뒤 실행한다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분 React 개발시에는 JSX의 간결함을 선호하며 대부분 코드 베이스를 JSX로 사용한다. 기존 Web은 HTML, CSS, JS를 기반으로 만들어 왔지만 이 시점에는 로직이 내용을 결정하는 경우가 많아졌다.그래서 JS가 HTML을 담당하게 되었다.이가 바로 React에.. 2025. 5. 12. [React] 컴포넌트 컴포넌트 내보내기export default 접두사는 표준 JS이다. 이는 React에만 해당하지 않는다고 한다.이 접두사를 사용하면 다른 파일에서 가져올 수 있도록 파일에 주요 기능을 표시할 수 있다. 함수 정의function Profile( ) { } 을 사용하면 Profile이라는 이름의 JS 함수를 정의할 수 있다.React 컴포넌트는 일반 JS 함수이지만, 이름은 대문자로 시작해야한다. 그렇지 않을 경우 작동하지 않는다. 마크업 추가아래의 컴포넌트는 src 및 alt 속성을 가진 태그를 반환한다.는 HTML처럼 작성 되었지만 실제로는 JS이다. 이 구문을 JSX라 하며, JS 안에 마크업을 삽입할 수 있다.반환문은 아래의 컴포넌트처럼 한 줄에 모두 작성할 수 있다.return ; 하지만 마크업.. 2025. 5. 12. [React] Vite로 React 시작하기 React를 시작하기 앞서 node.js를 설치해야한다.버전은 LTS로 설치하는것을 추천. * LTS란 Long Term Support의 약자이며 2년간 지원 한다라는 뜻이다.여기서 지원이란 해당 버전에 대한 안정성과 신뢰도를 보장한다는 뜻이다. 설치 후 node -v 명령어로 설치 및 버전 확인 * node 설치 후 vscode로 리액트 실행시 vscode를 재부팅하여 사용해야한다. 재부팅 안할시 명령어를 인식하지 못한다. react 설치 방법에는 next.js, CRA 등이 있다.next.js는 프레임워크 이기 때문에 next.js 문법을 배워야한다.CRA 경우 프로젝트 build시 웹팩으로 설정해야하고 Vite는 config에 설정하는 이점이 있다.Vite는 build tool이자 초기 세팅형태.. 2024. 10. 25. [React] React란 React는 FaceBook에서 만든 웹 및 사용자 인터페이스를 위한 JavaScript 라이브러리다. 개발자가 JS 파일에 HTML과 유사한 코드를 작성해 JSX라는 구문으로 UI 구성 요소에 중복성을 제거하고 쉽게 관리할 수 있도록 한다. JavaScript의 경우 DOM 객체의 ID를 가져와서 식별자를 만들었지만 React는 식별자가 필요없다. 또한 이벤트시 DOM 전체가 바뀌는 것이 아니라 Virtual DOM이라 하여 변경된 부분만 DOM에 반영한다. React가 Virtual DOM을 비교하는 원리 Vue와의 차이는 문법이다. React는 모든것이 JS에서 작동을 한다.Vue는 내장 컴포넌트가 있지만 React는 컴포넌트를 만들어야 한다. React는 컴포넌트 중심으로 돌아가기 때문에 복잡한.. 2024. 10. 25. 이전 1 다음
