본문 바로가기
목차

[노트장] 적으며 정리해 보는 이론/리액트문서14

[리액트문서보기][UI 표현하기]중괄호 있는 JSX 안에서 자바스크립트 사용하기 학습내용 따옴표로 문자열을 전달하는 방법 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법 ◼ 따옴표 문자열 JSX에 전달하려면 작은따옴표('')나 큰따옴표("")로 묶어야 합니다. 동적으로 사용할떄는 {} 중괄호를 사용합니다. [+중요] '',"" 와 {} 차이점은. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있으며, state에 저장된 데이터를 실시간을 반영이 가능합니다. ◼ 중괄호 사용하기: JavaScript 세계로 연결 하는 창 {} 사이에는 javascript 코드를 사용할수 있습니다. const today = n.. 2024. 3. 19.
[리액트문서보기][UI 표현하기] 첫번째 컴포넌트 학습내용 컴포넌트가 무엇인지 React 어플리케이션에서 컴포넌트의 역할 첫번째 React 컴포넌트를 작성하는 방법 ◼ 컴포넌트: UI 구성요소 HTML은 웹에서 풍부한 구조의 문서를 만드는 데 사용되는 마크업 언어입니다. React는 사용자가 마크업, CSS, JavaScript를 결합하여 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있게 해줍니다. React 컴포넌트는 HTML 태그와 마찬가지로 조합, 정렬 및 중첩하여 전체 페이지를 디자인할 수 있습니다. 프로젝트가 성장함에 따라 컴포넌트를 재사용하여 개발 속도를 높일 수 있으며, React 커뮤니티에서는 수천 개의 컴포넌트를 공유하고 있습니다. ◼ 컴포넌트 정의하기 예전에는 웹 페이지를 만들 때 주로 콘텐츠를 꾸며주고, 그 다음에 상호작용을 추가할.. 2024. 3. 19.
[리액트문서보기] React로 사고하기(구조 나누기, state위치 선정 등) 리액트 사고하기에서는 한가지 예제를 가지고 쭉~ 설명을 합니다. 이미 JSON API와 디자이너의 목업이 있다고 가정해 보겠습니다. [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" }, { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" }, { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" }, { category: "Vegetables", price: ".. 2024. 3. 18.
[리액트문서보기] Quick Start [참고] https://react-ko.dev/learn ◼ 컴포넌트 생성 및 중첩하기 function MyButton() { return ( Im a button ); } export default function MyApp() { return ( Welcome to my app ); } React 컴포넌트 이름은 항상 대문자로 시작해야 하고 HTML 태그는 소문자로 시작해야 합니다. export , export default 키워드로 외부에서 사용할수 있게 component 지정 ◼ JSX로 마크업 작성 하기 JSX는 HTML보다 더 엄격합니다. 과 같은 모습으로 태그를 닫아야 합니다. 또한 컴포넌트는 여러 개의 JSX 태그를 반환할 수 없습니다. ... 또는 빈 ... 래퍼와 같이 하나의 공유 부모.. 2024. 3. 17.

티스토리툴바