⭐ EcmaScript6 1. forEach() 함수 사용하기배열 함수 forEach()는 for 구문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않습니다.class ForEach extends React.Component { componentDidMount() { let forArray=[3, 2, 8, 8]; let forNewArray=[]; for(let i=0; i { // console.log(result); forEachNewArray.push(result); }); console.log("2. forEachNewArray : ["+forEachNewArray+"]"); } render(){ let h2Style={ ..
⭐ EcmaScript6 1. 전개 연산자(...) 사용하기전개 연산자는 배열이나 객체를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다.변수 앞에 마침표 3개(...)를 입력해 사용합니다.class SpreadOperator extends React.Component { componentDidMount() { //javaScript Array var varArray1=["num1", "num2"]; var varArray2=["num3", "num4"]; var sumVarArray=[]; sumVarArray=sumVarArray.concat(varArray1, varArray2); console.log("1. sumVarArray : "+su..
⭐ EcmaScript표준화된 스크립트 언어, 숫자는 버전을 의미ES6는 많은 기능이 추가 되었고, React에서도 모든 기능을 사용할 수 있습니다.1. 템플릿 문자열 사용하기문자열과 변수를 합치기 위해서는 문자열을 따옴표로 감싸고 +로 연결따옴표가 아닌 백틱(')으로 전체 문자열과 변수를 묶어 사용할 수 있습니다.변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개행 문자 없이도 사용할 수 있습니다.class ES6 extends React.Component { componentDidMount() { var jsString1 = "JavaScript"; var jsString2 = "입니다. \n 다음줄 입니다."; console.log(jsString1+" 프로그래밍"+jsS..
⭐ 생명주기 함수React 에서 생명주기란, 컴포넌트의 생성, 변경, 소멸 과정을 뜻합니다.1. 생명주기 함수 사용하기render() 사용하기- render() 함수는 return 되는 HTML 형식의 코드를 화면에 그려주는 함수, 화면 내용이 변경되어야 할 시점에 자동 호출class LifeCycle extends React.Component { render() { let h2Style= { fontSize: 16, fontWeight: "normal" }; console.log("3, render()"); return ( This is Render Function ) }}class App2 extends React.Component { ren..
⭐ 컴포넌트컴포넌트란, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위컴포넌트를 파일 단위로 작성한 후, 필요한 위치에서 로드해서 사용할 수도 있습니다.1. 컴포넌트 조합하기단계 1class Component2 extends React.Component { render() { return ( This is imported Component. ); }}class Component1 extends React.Component { render() { return ( React Example ); }}root.render ( )단계2class Component2 extends React...
⭐ 컴포넌트컴포넌트는 화면을 구성하는 구성 요소를 의미합니다.1. 컴포넌트는 개별적인 속성을 정의할 수 있다.ReactDOM에서 호출된 컴포넌트에서 전달한 속성은 {this.props.propsValue} 방식으로 전달 받습니다. props는 속성인 Properties의 약어입니다.this는 HelloReact 컴포넌트를 의미합니다. 이를 바인딩(binding)이라 합니다.전달받은 속성은 중괄호를 사용해서 렌더링하며, 이런 방식을 JSX의 표현식이라 합니다.class StudyReact extends React.Component { render() { return ( Study React {this.props.type} ) }}root.rende..
⭐ React의 기본 사용 메서드 1. React.createElement()태그 구성 요소를 생성하는 메서드 React.createElement( type, [props], [ ... children] ); type : 태그 이름 문자열, React 컴포넌트[props] : React 컴포넌트에 넣어주는 데이터 객체[ ... children] : 자식으로 넣어주는 요소들사용 예시root.render( React.createElement( "h1", null, "Hello React!!" ));실제 렌더링 결과 Hello React
⭐ 프로젝트 구조프로젝트의 진입점인 src/index.js 를 살펴보면, import 구문✅ React와 ReactDOM 가져오기✅ CSS 파일(index.css) 가져오기✅ 메인 컴포넌트인 App 가져오기✅ 웹 성능 측정을 위한 reportWebVitals 가져오기 const root = ReactDOM.createRoot(document.getElementById('root')); ✅ ReactDOM.createRoot()를 사용해 React 18+ 방식의 root 생성✅ document.getElementById('root')는 public/index.html에 있는 root.render( React.StrictMode> App /> React.StrictMode>)✅ document.g..
