WEB28 리액트 공부조각5. props 를 통해 컴포넌트에게 값 전달하기 이번에는 컴포넌트의 props 라는 개념에 대해서 알아보겠습니다. props 는 properties 의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다. props 의 기본 사용법 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다고 가정해봅시다. 그러면, 이렇게 코드를 작성하면 됩니다. 여러개의 props, 비구조화 할당 Hello 컴포넌트에 또 다른 props 를 전달해봅시다. color 라는 값을 설정해보세요. defaultProps 로 기본값 설정 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 됩니다. prop.. 2022. 11. 27. 리액트 공부조각 4. JSX 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JavaScript 로 변환을 해줍니다. 어떻게 변환되는지 한번 예시를 볼까요? 꼭 닫혀야 하는 태그 태그는 꼭 닫혀있어야 합니다. JSX 안에 자바스크립트 값 사용하기 JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다. style 과 className JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다릅니다. 우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다. 그리고, CSS class .. 2022. 11. 27. React 기초 3강 : 리액트에선 변수말고 state 만들어 쓰랬죠 (useState) https://www.youtube.com/watch?v=Qb8Oiy8i9IY&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=4 데이터 저장에는 2가지 방법이 있다. 1. 변수에 넣거나 ( 위 사진의 방법 ) ↑ 2. state에 넣거나 ( 아래 사진들의 방법 ) ↓ 맨 윗줄, import React from 'react'; 👉 import React, {useState} from 'react'; //의미 : 리엑트에 있는 내장함수 하나를 쓰도록 하겠습니다. 로 고쳐서 타이핑 하여 리액트의 데이터 저장공간 state를 만든다. ㄴ이로써 useState() 라는 함수를 사용할 수 있다. (참고) ES6 destructuring 新문법 let [a,b] = useState.. 2022. 11. 26. React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법) https://www.youtube.com/watch?v=FqnAFX9lQPQ React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법) App.js - 일종의 자바스크립트 이기 때문에 자바스크립트 문법에 맞추어서 작성해야한다. 에러사항은 터미널에 나와있어서 바로바로 수정할 수 있다. 🟢App.js 작성중 메인페이지 작동원리 index.js가 : App.js 파일의 내용을 public 에 있는 index.html 안에 박아 넣어주세요~ 라고 index.js 파일에서 말해주고 있다. 정확히 말하면, id가 root인 div 태그에 왜 App.js 를 다 가져다 주세요~ 🟠index.js 그래서 실제로 렌더링되는 것은 HTML 파일들 인데 div 안에 있는 내용들이 html 파일에 꽂히.. 2022. 11. 26. React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일) React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일) https://www.youtube.com/watch?v=nahwuaXmgt8 1.Node.js 검색 후 최신버전 설치하세요. ㄴ Q. 저는 Node.js 설치가 이미 되어 있는데요? ㄴ A. 100% 에러남 최신버전으로 재설치 ㄱㄱ 2. Visual Studio Code 에디터 설치 3. 코드짤 응큼한 폴더 만드셈 4. 에디터에서 작업폴더 Open Folder 하셈 5. 리액트 프로젝트 생성은 터미널을 열고 npx create-react-app 프로젝트명 입력 $ npx create-react-app blog // 의미 : blog란 이름의 리액트 프로젝트를 만들겠다는 의미. npx : 라이브러리 설치를 도와주는 명령어, (nodejs.. 2022. 11. 26. React 기초 0강 : 리액트왜 쓰는지 알려줌 (+ 수강시 필요 사전지식) https://www.youtube.com/watch?v=LclObYwGj90 React 기초 0강 : 리액트 왜 쓰는지 알려줌( + 수강시 필요 사전 지식) 모바일 App처럼 스무스하게 동작하는 웹들 메이저 SNS들도 마찬가지로 새로고침없이 웹탐색이 가능합니다. 일명 Web-app : 실제로 모바일앱과 비슷한 사용감. Web-app을 쉽게 만들 수 있는 React Web-app의 장점들 1. 모바일앱으로 발행이 쉬움 2. 앱처럼 뛰어난 UX 3. 그냥 웹사이트보다 비즈니스적 강점 (그래서 요즘 웹 개발자의 필수소양이 되었다.) 리액트 문법 특징 : 어려움 ~ 필요한 사전지식 ~ var let const if else for function return array object 다루기 addEventLis.. 2022. 11. 26. [개념은 암기]키워드로 정리하는 자바스크립트 핵심 포인트 🟢Chapter01 자바스크립트 개요와 개발환경 설정 01-1 자바스크립트의 활용 자바스크립트 : 란 웹 브라우저에서 작동하는 프로그래밍 언어입니다. ECMAScript : 란 유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭입니다. 웹 애플리케이션 : 이란 기존의 웹 페이지보다 많은 기능을 구현한 웹 페이지를 말합니다. 01-2 개발환경 설치와 코드 실행 개발환경 : 이란 개발을 할 수 있는 환경을 의미합니다. 텍스트 에디터 : 란 코드를 작성할 수 있는 프로그램을 말합니다. 이 책에서는 텍스트 에디터로 비쥬얼 스튜디오 코드를 사용합니다. 구글 크롬 개발자 도구 : 란 구글 크롬이 개발자를 위해 오류 확인 등의 기능을 제공하는 도구입니다. 01-3 알아두어야 할 기본 용어 표현식 : 이란 값을 만.. 2022. 11. 26. 학습방법이 잘 나와있는 저자인터뷰 학습방법이 잘 나와있는 저자인터뷰 p.006 구글 검색창 : 자바스크립트 로드맵 입력하고 이미지 검색 결과, 많은 학습 로드맵이 있으니 참고해보기 시작을 탄탄하게 잡지 않으면 앞으로 나아갔다가 돌아오고, 앞으로 나아갔다가 돌아오는 과정을 반복하게 됩니다. 초급 단계에서는 효율성을 떠나서 어떻거든 프로그램을 만들어 보는 일이 중요하다고 생각합니다. 프로그램을 만들어 봐야 어떤 부분에서 효율이 떨어지는지 알 수 있고, 개선 방법을 찾으면서 중급 단계로 나아갈 수 있기 때문입니다. 그리고 재미도 있습니다. p.007 Q. 프로그래밍을 어떻게 시작해야 하느냐, 이걸 다 외워야 하느냐, 프로그래밍은 암기 과목이 아니지 않냐 라는 질문에 대하여, A. 질문에 대한 필자의 답은 "암기 과목은 아니지만 처음에는 외우면.. 2022. 11. 10. CHROME에서 CSS 확인하기 [STEP1] 작성한 HTML, 오른쪽 마우스, Open with Live Server로 들어가서 (※주의 외부스타일CSS파일로는 들어갈 수 없습니다.) [STEP2] F12(개발자 도구) ☞ Ctrl + Shift + C 로 분석하고 싶은 영역을 찍고 ☞ HTML 영역 클릭 ☞ 해당부분 스타일 탭의 최상단, element.style{}에서 넣어보고 싶은 스타일 요소들 작성하며 확인해보면 된다. + 수정한 부분은 복사하여 원래의 Visual Studio Code에 붙여넣어야 날아가지 않는다! 2022. 11. 7. 이전 1 2 3 4 다음 728x90 반응형
