리엑트 6

React 독학 [State]

State 란? State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다. 선언방법const App = () => { const [value, setValue] = useState(초기값); return ...}  여기서 useState 를 사용하기 위해서는 반드시 import 확인하자!import {useState} from "react";  1. component 내에서 유동적으로 변할 수 있는 값을 저장합니다.2. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다.3. State값이 변경되고 재 렌더링이 필요한 경우 React가 자동으로 계산하여 변경된 부분을 렌더링 합니다. State 도 Props 와 마찬..

React 2024.11.09

React 독학[Props]

1. Props 란?기본적으로 Component 에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수,함수,객체,배열 등 JavaSvript의 요소라면 제한이 없다.주로 Component의 "재사용"을 위해 사용.props 는 "읽기 전용" 이다.//컴포넌트 생성const Welcome = (props) =>{ return Hello,{props.name} } //컴포넌트 사용const A = () =>{ return ;}  DOM Element 의 Attribures- 기본적인 DOM Element(div,span 등) 들의 Attrubure 는 카멜표기법 으로 작성한다.     ex) tableIndex ..

React 2024.11.06

React 독학 [ JSX ]

JSX란?jsx는 함수호출과 객체 생성을 위한 문법적 편의를 제공하는 JacaScript의 확장이다 .HTML과 비슷하게 생겼으나 JavaScript이고 HTML과 다른 부분이 있다.JSX는 Bavel에 의해서 Transcompile 된다.const a = () =>{ return( 반갑습니다 사이좋게 지내요 또봐요 ); }  장점1. 개발자의 편의성 생상 향상2. 협업에 용의       -개발자가 아니라도 디자이너가 JSX로 작성된 코드를 보았을때 대략적으로 이해가 가능하여 협업에 용의하다.3. 문법 오류와 코드량 감소     - 복잡한 코드를 짧게 작성 가능  특징HTML 태그 내에 JavaScript 연산// HTML +..

React 2024.11.04

React 독학 [ Create React App / Node.js 설치]

Create React App (CRA) 란?-React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 "보일러플레이트"-수많은 React용 보일러플레이트가 있지만 Facebook에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰임-프로젝트 생성에 필요한 다양한 기능을 Command로 제공 장점개발자가 온전히 개발에 집중할 수 있도록 함상대적으로 덜 중요한 코드는 노출되지 않음대부분의 모든 브라우저에서 해석될 수 있도록 transcomile 지원-Babel 내장-배포 시 코드 번들링-Webpack 내장  Node.js 란?주로 서버 프로그래밍에 사용되는 JavaScript 기반의 소프트웨어 플랫폼으로 프론트엔드 개발자의 접근성이 높히며HTTP통신 관련 라이브러리 내장, NPM을 통한..

React 2024.11.01

React 독학 [기초 JavaScript 문법 알아보기]

React를 하기 전에 우선 JavaScript 문법을 알고 있어야 한다  var / const / let  제일 기본적인건 var / const / let 모두 선언을 의미하는데 let / var 는 변경이 자유로운 변수 const는 한번 선언하면 값을 바꿀 수 없는 상수이다.하지만 요즘은 var는 잘 쓰이지 않고 let /const 로만 쓰인다고 한다.const a = 2;a = 4; //a 는 위에서 선언한 값을 바꿀 수 없는 const로 선언했기 때문에 값 변경 불가let b = 12;b = 5; // b는 변경이 자유로운 let 으로 선언 했기에 값 변경 가능   for / forEachvar a= [0,1,2,3]for(var i=0; i같은 Array에 들어있는 0,1,2,3을 출력하는 코드..

React 2024.10.29

React 독학 [시작 - React란?]

학원 수강이 끝나고 2달여 시간이 지난 지금 React 독학을 해보려고 한다React  동영상 강의 학습 후 복습겸 정리용 기록 을 바탕으로 작성 예정! Start React  란?사용자 인터페이스를 만들기위한 JavaScript 라이브러리1.Component 기반 -독립적인 단위로 쪼객어 구현 가능 2.Virtual DOM -가상의 표현을 실제 DOM과 동기화 하는 프로그래밍 개념3.JSX - JavaScript  내에서 UI를 작성하기 위해 개발자에게 익숙한 환경(HTML)을 제공 React 의 장점 1.생산성 / 재사용성-Component 와 Hook 을 활용하기에 작은단위, 독립적인 요소로 개발되기 때문에 생산성과 재사용성이 높음-JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입할 ..

React 2024.10.28