Front-End/React23 [ React ] React 입문 ④ Props [ Props ] state( 상태 ) : 컴포넌트가 가지는 동적인 데이터 Props : 컴포넌트에 데이터를 전달하는 방법 count의 초기 값을 App 컴포넌트에서 Counter 컴포넌트에게 전달하는 값으로 사용해야할 경우 Props 기능을 사용해야한다. → 부모 컴포넌트에서 자식 컴포넌트에게 initialValue라는 값을 전달할 수 있음 App.js import './App.css'; import Counter from './Count'; import React from 'react'; function App() { return ( +를 누르면 1 증가, -를 누르면 1 감소 ); } export default App; 즉, 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값을 이름을 붙여서 전달하는 방식.. 2022. 9. 17. [ React ] React 입문 ③ State [ State( 상태 ) ] state : 계속해서 변환하는 특정 상태, 상태에 따라 각각 다른 동작을 한다. 컴포넌트가 상태라는 테마를 갖고 사용자는 스위치 같은 요소를 통해 상태를 변화시킬 수 있다. 리액트에서의 state는 컴포넌트가 가진 테마처럼 계속해서 값이 바뀔 수 있는 동적인 데이터이고 상태를 변경하는 등의 권리는 상태를 가진 컴포넌트가 직접 관리하게 된다. state는 리액트의 기능이기 때문에 리액트를 import 해줘야한다. 또한 useState라는 상태를 사용하겠다는 메소드를 추가적으로 import 해줘야한다. import React,{useState} from 'react'; App.js import './App.css'; import Counter from './Count'; fun.. 2022. 9. 17. [ React ] React 입문 ② JSX [ JSX ] JSX : 자바스크립트의 확장 문법이자 자바스크립트와 HTML을 혼합해서 사용할 수 있는 리액트에서 주로 사용하는 표현식 공통적으로 사용해야하는 요소들을 리액트에서는 컴포넌트로 분할해서 재사용할 수 있다. JSX는 컴포넌트를 만드는데 유용하게 사용되는 문법이다. * 리액트 시작 명령어 : npm start 리액트는 보통 자바스크립트 기반으로 동작하기 때문에 확장자를 js로 해서 만들어주면 된다. App.js 컴포넌트가 자식으로 포함하고 있지 않은 컴포넌트들은 화면에 나타나지 않는다. → index.js에서 아이디가 root인 요소를 찾고 그 요소에다가 App이라는 컴포넌트를 불러와서 랜더를 하기 때문에 결론적으로 App 컴포넌트가 최상위 부모가 되고 그 부모가 포함하지 않은 자식 요소는 화.. 2022. 9. 17. [ React ] React 입문 ① [ React가 필요한 이유 ] 1. 다른 페이지에서도 공통적으로 사용되는 것이 예상되는 요소들을 별도의 파일이나 모듈로 제작해놓고 컴포넌트 형식으로 각각 필요한 파일마다 불러다 사용하는 방식이 페이지를 추가적으로 만들어야하는 상황에서 타이핑하는 코드가 확연하게 줄어든다. 공통적으로 다른 페이지에서도 사용이 되기 때문에 재사용 되어야하는 요소들을 컴포넌트로 만들어서 사용하는 방식을 컴포넌트화 방식이라 한다. 컴포넌트화 방식은 컴포넌트가 정의된 파일 하나만 수정하게 되면 그 컴포넌트를 불러다 쓰는 다른 페이지들은 자동적으로 수정이 된다. 즉, 컴포넌트에 오류가 있거나 수정해야하는 상황이 생겼을 때 대처하기가 수월해지고 쉬워지기 때문에 유지보수하기 쉬워진다. 기존 HTML으로만 사용했던 방식은 요소들을 컴포.. 2022. 9. 13. [ React ] Node.js [ React.js의 기본 환경 Node.js ] 자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행하게 된다. 브라우저는 각각 자신만의 엔진을 보유하고 있음 ex) Micro Edge - Chakra 크롬 브라우저의 V8엔진이 가장 대표적인 자바스크립트 엔진이다. 브라우저는 HTML 문서를 기반으로 동작하므로 자바스크립트를 HTML 문서 내부에서만 사용했었지만 크롬의 V8 엔진은 C++를 기반으로 만들어졌기 때문에 HTML 문서 내부 뿐만 아닌 외부에서도 사용이 가능해진다. Node.js는 V8 엔진을 이용해서 자바스크립트를 브라우저 뿐만 아닌 어디에서든 사용가능하게 해준다. 즉, Node.js는 자바스크립트 실행 환경이 된다. ▶Javascript's Runtime 자바스크립트가 브라.. 2022. 9. 13. 이전 1 2 3 다음
