반응형 공부기록81 [REACT] JSX에서 Javascript 사용하기 - 공식 문서랑 같이 공부하기 시리즈5 JSX에서 Javascript 사용하기 JSX에서 문자열 속성은 작은 따옴표 또는 큰 따옴표를 사용한다. export default function Avatar() { return ( ); } 만약 src와 alt를 동적으로 지정하고 싶다면 어떻게 해야할까? 바로 " " 대신 { } 를 사용하는 것이다! export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( ); } 중괄호 { } 는 JSX에서 Javascript를 사용할 수 있게 해준다. 따라서 아래처럼 중괄호 사이에 함수를 호출할 수도 있다. const today =.. 2023. 11. 15. [REACT] JSX란 - 공식 문서랑 같이 공부하기 시리즈4 JSX란? Javascript를 확장한 문법으로 Javascript 파일 안에 HTML과 유사한 마크업을 작성할 수 있다. 리액트에서 렌더링 로직과 마크업이 같은 위치에 있는 이유 전통적인 웹은 HTML, CSS, Javascript로 이루어져 있고 HTML은 컨텐츠, CSS는 디자인, Javascript로는 로직을 작성해 보통은 분리된 파일로 관리를 해왔다. 하지만 웹이 동적인 환경으로 변화하면서 로직이 컨텐츠를 결정하는 경우가 많아졌다. 그래서! 리액트에서 렌더링 로직과 마크업(컨텐츠)가 컴포넌트에 묶여 사용된다고 보면 된다. HTML에서 JSX로 변환하기 아래는 HTML로 작성한 파일이다. Hedy Lamarr's Todos Invent new traffic lights Rehearse a movi.. 2023. 11. 15. [REACT] 컴포넌트에 props 전달하기 - 공식 문서랑 같이 공부하기 시리즈3 -목차- [0] 서론 [1] 컴포넌트에 props 전달하는 방법 & 컴포넌트에서 props 읽는 방법 [2] props에 디폴트값 주는 방법 [3] JSX 전개 구문으로 props 전달하기 [4] 자식을 JSX로 전달하기 [4] props가 변하려면..? 서론 props는 JSX 태그에 전달하는 정보다. 예를 들어 img 태그에는 className, src, alt, width, height가 담길 수 있다. 이 속성들은 img 태그에 미리 정의되어 있는 props 이다. 하지만 컴포넌트에는 props에 무엇이든! 전달할 수 있다. 컴포넌트에 props 전달하는 방법 & 컴포넌트에서 props 읽는 방법 1. 자식 컴포넌트에 props 전달하기 export default function Profile().. 2023. 11. 14. [REACT] Components Import & Export - 공식 문서랑 같이 공부하기 시리즈2 -목차- [1] ROOT Component란? [2] 컴포넌트 Export & Import 하기 [3] 같은 파일에서 컴포넌트 여러 개를 Export & Import 하기 Root Component란 개인 환경마다 다르겠지만, 보통 Root Component는 App.js 파일이다. create-react-app으로 실행할 경우 앱이 실행되는 지점은 App.js라고 보면 된다. 만약에 Next.js처럼 파일 기반으로 라우팅하는 경우라면 페이지별로 root 컴포넌트가 다를 수 있다. (Next.js를 안 써봐서 정확하게 와닿지는 않는다.) function Profile() { return ( ); } export default function Gallery() { return ( Amazing scient.. 2023. 11. 14. 이전 1 2 3 4 5 ··· 21 다음 728x90 반응형
