React Full Tutorial (재정리)5 #5 리스트 아웃풋 시키기 같은 컴포넌트를 반복해야 할 경우, map()을 통해 간단히 구현할 수 있다.리액트까지 왔는데, 자바스크립트를 설명할 필요는 없을 것 같고, 주의해야 할 점은 ()=>{}이 아닌 ()=>() !return 내에서 중괄호({ })는 스크립트가 들어간다는 의미이기 때문에 일반 가로를 사용한다. 그리고 key라는 props를 아이템에 전달해줘야 한다. 없을 경우 에러까지는 아니지만 경고문이 콘솔을 더럽힌다.html의 id와 비슷한 개념인데 전체 아이템에서 고유한 값일 필요는 없고, 형제 사이에서 고유 값을 지녀야 한다. id 데이터가 있으면 동일하게 넣어주면 되고, 없을 시 index를 활용해 생성해 주면 된다.import classNames from "classnames";const List = () => .. 2024. 10. 29. #3 컴포넌트에 변수, 함수와 스타일 삽입하기 별거 없어요. { } 안에 변수 넣어주면 그만입니다.함수의 경우 () 없이 function 이름만 넣어주셔야 해요.import classNames from "classnames";const Button = () => { const name = "Hello" const sayHello = () => { console.log("Hello") } return ( "{name}"라고 말해 )}export default Button; 만약 onClick={sayHello()} 으로 삽입하시면 페이지 렌더될 때 자동 실행되어, 미클릭 상태인데도 불구하고 실행되었음을 콘솔에서 확인할 수 있습니다. 그렇담 파라미터를 넣고 싶을 때.. 2024. 10. 25. #2 컴포넌트 생성하기 우선 Simple React Snippets를 설치합니다. 굳이? 네, React 컴포넌트 생성하기 참으로 귀찮기 때문이죠.설치 후, 원하는 위치에 ${파일명}.jsx을 생성하고 해당 파일에서 "sfc"를 입력 후 enter키를 누르시면 기본코드가 자동입력되고 한 번에 컴포넌트 이름을 지정할 수 있습니다. 그렇게 생성된 컴포넌트의 기본형입니다.const 컴포넌트명 = () => { return ()}export default 컴포넌트명;const Button = () => { return ( Hello )}export default Button;여기서 주의사항!return안에는 하나의 요소만 들어갈 수 있습니다. 아래와 같이 작성하면 바로 오류나요~const Button = () .. 2024. 10. 25. #4 보다 편한 스타일 작업을 위해 sass 및 classnames 설치 아직도 css으로 작성하시는 분 없으시겠죠?(간혹 만난다는 건, 안 비밀) 일단 설치!버전 딱히 상관없다. 최신버전으로 받자!그래도 제 버전이 궁금하신 분을 위해, 저는 ^1.80.4입니다.npm i sass 혹시 gulp-sass로 작성한 scss를 옮겨왔더니 오류가 나신다고요?예, 정상입니다.dart sass로 코드 변경해주셔야 해요.거지 같고, 참 좋죠? dart sass는 사실 별거 없고, @mixin, $variable가 선언되어 있는 파일을 상단에 @use로 가져와 사용해야 합니다.@use "../base/variables.scss" as var;@use "../base/mixins.scss" as *;.test { color: var.$primary; @include fontSize(20);.. 2024. 10. 25. #1 react 설치 npx create-react-app projectName 자세한 방법은 아래 글에서 확인 가능하십니다.2021.08.11 - [React (old ver)/basic] - react 설치 및 개발환경 설정 react 설치 및 개발환경 설정(node 14.17.0으로 설치 진행하였습니다) 1. node 및 vscode 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefifresh-mint.tistory.com 앞으로 해당 카테고리에서 .. 2024. 10. 25. 이전 1 다음
