Component 3

React, 하위로 정보를 전달하자 , props / 컴포넌트의 종속관계

props? 컴포넌트에 임의의 프로퍼티와 값을 지정하여 객체 형태로 전달.매개변수의 참조를 통해 컴포넌트의 프로퍼티를 필드형식으로 참조가능. TestReact 라는 컴포넌트를 실행할건데 , value에 1이라고 지정할게.function TestReact(props) { return 테스트 {props.value1};}매개변수로 객체를 전달받아 , 실행에서의 props.value1 의 형태를 볼 수 있다.  props 의 구조분해 할당 이전의 객체의 구조분해 할당 케이스를 보았다.프로퍼티와 변수명이 같다면 , 변수에 프로퍼티의 값이 할당되는 개념이였다.case 1  function TestReact({value1, value2}) { return ( 테스트..

Developer/React 2024.06.10

React, 컴포넌트(Component) / import export / as

컴포넌트란 ?JSX 형식으로 구성된 HTML 요소들을 함수 또는 클래스 형태로 그룹핑하여효율적인 랜더링 수행을 위한 리액트의 요소.최근에는 함수형태로 컴포넌트를 만들고 클래스의 형태는 지양한다. 컴포넌트는 대문자로 시작하는것이 명시적 규칙.소문자로 시작할 경우 컴파일 에러가 발생됨.( 일반적 함수 호출 형태는 문제 되지 않음.)사용시 구분자 "/" 가 와야함. - 사용형식 또는     사용시 함수 형태로도 가능함.Component() 모듈내 컴포넌트가 하나인 경우 모듈명과 파일명을 동일하게 처리하는것을 권장한다.1파일 1컴포넌트가 일반적이기 때문에 명시적이며 직관적으로 파일명과 컴포넌트 명을 통일하자.   return 의 형태들은 1 덩이를 반환한다면 , 중괄호와 return 이 생략 가능return 테..

Developer/React 2024.06.10

React , React의 시작, npm start !

리액트란 ? 웹 프레임 워크 , 자바스크립트의 라이브러리의 하나.싱글페이지 애플리케이션(SPA)을 제작한다. 리액트는 왜 쓰는걸까 ?html,CSS,javascript를 상호적으로 한꺼번에 사용할수 있다.  리액트의 설치 ,  node.js node.js 를 설치하여 리액트를 사용한다.node.js 란 , 브라우저 외에서 자바스크립트를 실행 할 수 있도록 도와주는 자바스크립트 엔진. node 의 패키지 매니져 , npm패키지란 ? 라이브러리들의 묶음. node.js 설치 이후 리액트 설치 가능react 전용 작업 폴더 생성하여 vscode 탐색기에 로드vscode 터미널 설정npm install create-react-app - 리액트 프로젝트 생성을 위한 앱 설치npx create-react-app m..

Developer/React 2024.06.10
728x90