개발/React4 React 개념 : class component 리액트에는 State 라는 기능이있다. State 는 앱 실행중 변화가능성이있는 동적데이터를 다룰때 사용한다. 그런데 State는 이전까지 이용한 함수형 컴포넌트에서 사용을 하지못한다. 따라서 클래스형 컴포넌트를 이용해야한다. 그렇다면 클래스형 컴포넌트는 함수형 컴포넌트랑 어떤점이 다를까? 가장큰 차이점은 reder 함수를 통하여 JSX 를 반환한다. import React from 'react'; class App extends React.Component{ state = { } render () { return (Hello!! {this.state.number}); }; } export default App; 위는 기본적인 클래스형 컴포넌트의 모습이다. 컴포넌트 클래스를이용하기위해선 React.Com.. 2021. 3. 2. React 개념 : map 이전의 코드에서 Test 컴포넌트 안에 Game 컴포넌트를 3번 넣어주었다. 만약 웹에서 표현해야하는 Game이 100가지가 넘어간다면 어떻게 될까? 아마도 코드는 import React from 'react'; function Game(props){ return ( I'M {props.name} ); } function Test() { return ( Ha Ha Test!!! . . . X100 . ); } export default Test; 이렇게 100줄을 입력하는 비효율적인 코드가 될것이다. 이를 줄여주기 위해 서용하는 함수는 map 함수이다. 우선 map 함수를 이용하기 위해 GameList 배열을 선언한다. GameList 배열은 서버에서 데이터를 전달하였다는 상황을 가정하기위해 추가하는것이.. 2021. 2. 27. React 개념 : props 리액트에서 props 는 쉽게 말해 C++ , JAVA 등 다른 컴퓨터 언어에서 쓰이는 매개변수와 비슷하다고 볼수있다. 다시말해 props 는 컴포넌트 간의 전달되는 데이터를 뜻한다. 놀랍게도, 리액트는 컴포넌트 안에 컴포넌트를 정의 할수있다. 다음과 같이 Test.js 파일을 수정하였다. import React from 'react'; function Game(){ return ( I'M LOL ); } function Test() { return ( Ha Ha Test!!! ); } export default Test; 이전에 말했듯 리액트는 " " 과 같은 표시로 컴포넌트를 인식한다고 하였다. 위의 코드를 보면 Test 컴포넌트 안에 이라는 코드를 통하여 컴포넌트안에 컴포넌트를 넣었다. 또한 '' .. 2021. 2. 27. React 개념 : 컴포넌트 (Component) 컴포넌트란 (Component) ? - 리액트에서 기능을 나눌때의 최소 단위이다. - 리액트는 컴포넌트와 함께 동작하고, 리액트 앱은 모두 컴포넌트로 구성된다. 컴포넌트는 JSX 라는 문법을 사용해서 만들어지는데 이는 HTML + javascript 언어를 조합한 언어이다. 리액트는 과 같은 표시를 컴포넌트로 인식하고, 그 컴포넌트가 반환하는 값을 화면에 그려준다. 다음은 index.js 에서 APP 컴포넌트를 사용하는 코드이다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(,document.getElementById('root')); 여기서 추가적으로 컴포넌트를 추가.. 2021. 2. 27. 이전 1 다음
