JavaScript/React45 React) state에 대해서 (클래스형 컴포넌트의 setState, 함수형 컴포넌트의 useState) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. state - 컴포넌트 내부에서 바뀔 수 있는 값 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. 즉, props를 변경하려면 부모 컴포넌트에서 바꿔줘야 하는 것이죠. 그에 반면 state는 컴포넌트 내부에서 값을 변경할 수 있습니다. 클래스형 컴포넌트의 state Counter.js import { Component } from "react"; class Counter extends Component { constructor(props) { super(props); // state 초깃.. 2022. 11. 1. 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. 이전 1 ··· 4 5 6 7 8 다음
