웹개발일지

언제 ""와 {}를 각각 사용할까?1. 정적 값(일정한 경로) → ""이미지 경로가 고정되어 있고, JavaScript 로직이 필요하지 않을 때.tsx코드 복사"/images/tarot-cards.jpg" alt="Tarot Cards" />2. 동적 값(변수나 표현식) → {}이미지 경로를 변수로 관리하거나, 로직에 따라 경로를 설정해야 할 때.tsx코드 복사import tarotCard from "../Image/tarot-cards.jpg"; img src={tarotCard} alt="Tarot Cards" /> // 경로가 조건에 따라 달라질 경우 img src={isSpecial ? "/images/special-card.jpg" : "/images/regular-card.jpg"} alt="..

리액트 프로젝트를 열면 App.js가 있다. 처음 리액트를 마주했을 때 궁금했던 점이, js파일에 html 코드를 작성해서 띄운다는 점이었다. 원초적인 방법으로 생각해보면 html을 만들고 만든 html 파일을 불러와 띄우는 것인데, 요 App.js에 쓰여진 코드를 보아하니 App() 함수 안에서 return 함수를 사용하여 html코드들을 반환해주고 있더라. 요게 단순히 js 문법만은 아니고, 이렇게 리액트에서 html 코드를 js파일에서 사용할 수 있게 하는 JSX 문법이 따로 있다.   간단히 보면 우선 div 코드와 h4코드가 쓰였다. div태그에는 css 속성인 className이, h4태그에는 값으로 {post} 변수가 들어가 있다. 이 때, 변수를 불러와 바로 보여주기 위해 {}를 써서 연결..

리액트 애플리케이션은 여러 컴포넌트가 서로 통신하는 구조이다. 여러 컴포넌트로의 진입점 역할을 하는 메인 컴포넌트가 필요하다. 컴포넌트 상속보다 컴포지션을 선호한다. 이번에 작성하는 코드를 통해 props, state 사용과 부모 - 자식 컴포넌트간 데이터를 효율적으로 전달하고 구조를 설계하는 방법을 익혔다. 부모와 자식 컴포넌트 관계 자식이 부모 클래스를 상속받는 구조가 아닌, 부모 컴포넌트가 하나 이상의 자식 컴포넌트를 포함하는 구조를 의미한다. 컴포지션이란? 모든 컴포넌트 클래스가 React.Component 를 상속받고 부모 컴포넌트가 자식 컴포넌트를 랜더링한다는 뜻이다. 부모, 자식 모두 React.Component를 상속받는다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 어떻게 넘기는가, pr..

import React from 'react'; class Card extends React.Component { render() { // react ele -> DOM const img = "img/strings.png"; const imgalt = "string"; const desc = "A very authentic and beautiful instrument!!"; const price = 100; const productName = "Strings"; return( {productName} price: {price} {desc} Buy ); } } 리액트 컴포넌트는 React.Component를 상속받는 자바스크립트 클래스다. render(): 리액트 앨리먼트를 반환하며, 리액트 컴포넌트를 일..