React

props 부모 데이터 => 자식 컴포넌트로 데이터를 전달하는것 알아보기 위해 자식 컴포넌트에 예제로 생명주기 생성 함수를 만들자 import { useEffect } from 'react' // useEffect 불러오기 function propsEX(props) { Method 영역 useEffect(() => { console.log(props.prop_value) } , []) // 콘솔에 실행 return ( ) } export default propsEX props(매개변수).prop_value(변수명) 부모 => 자식에게 전달된 값 부모 컴포넌트 (App.js) 결과는? hong 데이터가 전달됨 요약 부모 컴포넌트 자식 컴포넌트 매개변수명.변수명

Lifecycle 생성 / 수정 을 의미한다. Mount 함수 Method 영역 컴포넌트 생성 함수 : 자동실행 특징 화면이 뜨자마자 실행된다. 최초 1번만 화면이 뜰 때 실행된다. 사용법 import { useEffect } from 'react' useEffect(() => {실행문;} , [ 감시할 변수 ]) 예제) let [element , setElement] = useState(true); 컴포넌트 생성 함수 : 자동실행 Mount 함수 useEffect(() => { 실행문 } , []) 컴포넌트 수정 함수 : 자동실행 변수의 값이 바뀔 때 자동 실행된다. useEffect(() => { 실행문 } , [ 감시할 변수 ]) 결과 컴포넌트 생성 함수 = 최초 실행문 컴포넌트 수정 함수 = 최초..

컴포넌트(Component) 파일명 : B_Home2.js 컴포넌트는 크게 2가지로 Attibute,Method/ 화면에 구현될 곳 으로 나누어지는 것 같다 (아직까지는 그런듯...) function B_Home2() { Attirube , Method return( 화면에 구현될 곳 ) } 바인딩 변수 선언 바인딩 변수 : 화면에서 수정이 일어났을 때 정상적으로 보이게 만들어주는 변수 let [변수명, 수정(setter)함수] = useState(초기값) 예제) import {useState} from 'react' 로 불러 와 주고 function B_Home2() { Attirube , Method,연산영역 let [ element, setElement ] = useState("초기값") // el..

컴포넌트란? 쉽게 말해서 페이지? 같은 얘 이름(파일명).js => 부모 - 자식 관계를 가짐 : 새로운 html 태그가 생성 App.js 리액트의 첫번째 페이지(컴포넌트) 리액트 서버가 가동되고 처음으로 실행되는 페이지(js) 자식 컴포넌트를 만들어 보자!! 리액트 페이지의 단축키 : rfce 부모 컴포넌트 App.js 우선 import 하는방법 import 컴포넌트명 from "주소값" 그러면 자식 컴포넌트(Home) 생성이 완료되었습니다!

이제 리액트다!! 와이~! 뭔가 다른 것들을 적지도 않고 ㅋㅋ { 부트스트랩은 적지도 않았네.. 넘어가.. } 리액트 매우 기대중 cd hello-world == hello-world 프로젝트(폴더)가 생김 프로젝트 생성 / 연결 완료!! ctrl + c (중단) # 최초 한번만!! npm install -g create-react-app # react 프로젝트 만들기 : npx create-react-app 프로젝트명 # react 프로젝트 실행하기 : cd 프로젝트명 (프로젝트명 폴더로 들어가기) npm start (react 서버 가동 명령어) # react 프로젝트 중단하기 vscode 터미널 창에서 : ctrl + c npm start (= 실행) React / Vue : SPA(Single P..