본문 바로가기
SMALL

JavaScript135

React) props에 대해서 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. props - properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 - 사용하는 부모 컴포넌트에서 설정할 수 있음 props 렌더링 및 값 지정 MyComponent.js const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name}입니다.; }; export default MyComponent; App.js (부모 컴포넌트) import MyComponent from './MyComponent'; const App = () => { return }; export default App; props 기본값 설정 .. 2022. 11. 1.
React) 컴포넌트의 종류, 컴포넌트 생성해보기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트의 종류 함수형 컴포넌트 import React from 'react'; import './App.css' function App() { const name = '채니'; return {name} } export default App; 함수형 컴포넌트의 장점 선언이 편리 메모리 자원을 아낄 수 있음 (클래스형 컴포넌트에 비해) 빌드 후 배포할 때도 결과물의 파일 크기가 더 작음 함수형 컴포넌트의 단점 state와 라이프사이클 API의 사용 불가 (단, v16.8 이후 Hooks를 통해 해결) 클래스형 컴포넌트 반드시 render 함수가 있어야하고 JSX를 반환해야함 import.. 2022. 11. 1.
React) JSX 문법에 대하여 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. JSX 문법 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함 이유는? Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 존재하기 때문! 잘못된 문법 function App() { return ( 리액트 안녕! 잘 작동하니? ); } 컴포넌트 내에 h1, h2 요소가 존재하는데 이를 감싸는 부모 요소가 없으니 오류가 발생하는 것을 확인할 수 있습니다. 올바른 문법 ① div 태그 사용 function App() { return ( 리액트 안녕! 잘 작동하니?.. 2022. 10. 27.
React) JSX에 대해서 (장점) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. JSX란? : 자바스크립트의 확장 문법 function App() { return ( Hello react ); } 위와 같은 JSX로 작성된 코드가 번들링되는 과정(파일이 묶여지는 과정)에서 바벨(최신 ES6버전을 ES5버전으로 변환)을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 아래와 같이 말이죠. function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } JSX의 장점 ① 보기 쉽고 익숙하다 HTML 코드를 작성하는 것과 비슷하기 .. 2022. 10. 27.
React) 프로젝트 열기 및 코드 이해하기(import 구문, 번들러, 웹팩) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 프로젝트 열기 파일 > 열기 > hello-react 디렉터리 > src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 코드 이해하기 import logo from './logo.svg'; import './App.css'; import 구문 : 특정 파일을 불러오는 구문 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이지만, 브라우저가 아닌 .. 2022. 10. 27.
React) Node.js, yarn, Git, VS Code 다운로드 및 프로젝트 생성 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Node.js 다운로드 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * Node.js 다운로드 이유? 더보기 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치! 이 때 사용하는 개발 도구에는 ECMAScript 6를 호환시켜주는 바벨, 모듈화된 코드를 한 파일로 합치고(.. 2022. 10. 26.
LIST

티스토리툴바