web/react
[React] props
1. props란? React에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 넘겨주는 방식이다. React의 Data Flow는 단방향 형식으로 부모에게서 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다. 따라서, props에 있는 데이터들은 수정이 불가능하며 오직 안에 있는 값을 꺼내서 사용할 수만 있다. 2. props 사용 예시 2-1. Hello 컴포넌트에서 name 값 사용하기 🌠 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 🌠 Hello.js import React from "react"; function Hello(props) { re..
→2021.09.15
web/react
[React] useEffect
1. useEffect 함수란? React 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 2. useEffect 사용법 🔹 첫 번째 useEffect(() => {}); useEffect의 가장 기본 형태이나, 거의 사용하지는 않는다. Dependency가 없기 때문에, 작은 요소가 하나라도 변화할 때마다 useEffect가 발동되어 불필요한 실행이 많아지기 때문이다. 🔹 두 번째 useEffect(() => {}, []); useEffect에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행한다. 🔹 세 번째 useEffect(() => {}, [name]); useEffect를 특정 값이 업데이트 될 때 호출한다. useEffect를 렌더링 후 한번, 그리고..
→2021.09.15
web/react
[React] 리액트 시작하기
🎯 리액트 설치 및 셋팅 명령어 1. Node.js 검색 후 최신버전을 설치한다. 2. Visual Studio Code 에디터를 설치한다. 3. 코드를 작성할 폴더를 생성한 후, 에디터에서 작업폴더를 Open Folder 한다. 4. 터미널에서 npx create-react-app 프로젝트명을 입력해서 리액트 프로젝트를 생성한다. 5. cd 프로젝트명(폴더) 명령어를 통해 프로젝트명의 하위폴더로 이동한다. 6. 코드 작성 후, 터미널에서 npm start를 통해 프로젝트를 실행한다. 🎯 리액트 프로젝트 생성 후 정리 및 확인할 파일 1. public 폴더 > logo.png, manifest.json 삭제 2. src 폴더 > App.js에서 컴포넌트들을 로드 후 사용 🎯 리액트 프로젝트 git rep..
→2021.09.13
web/react
[React] 컴포넌트와 state
1. Component 컴포넌트(Component)란, 리액트의 기본 단위로, UI를 구성하는 개별적인 뷰 단위이다. 여러 컴포넌트를 조합하여 복잡한 화면을 만들 수 있다. 컴포넌트는 JavaScript의 함수 형태로 구현된다. 컴포넌트는 재사용이 가능하다. 컴포넌트 클래스의 이름은 첫 글자를 대문자로 작성한다. (컴포넌트 클래스: 컴포넌트를 찍어내는 공장) 2. State setState(): 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다. state는 동적인 데이터를 다루는 방식으로, Hooks중 하나인 useState를 통해 다룰 수 있다. state는 함수의 매개변수처럼 컴포넌트에 전달되는 props와 달리, 함수 내에 선언된 변수처럼 컴포넌..
→2021.09.13

• 이전
• 1
• 다음