React 검색 결과

해당 글 46건

3. 컴포넌트

3-1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지이다 함수형 컴포넌트 클래스형 컴포넌트 위의 두 컴포넌트 모두 동일한 결과를 나타낸다 클래스형 vs 함수형 리액트의 버전이 올라가면서 현재는 둘의 차이점이 없다고 봐도 된다 아래는 리액트 공식 메뉴얼이다 결정적으로, Hook은 존재하는 코드와 함께 나란히 작동함으로써 점진적으로 적용할 수 있습니다. 그냥 함수형을 쓰자 3-3. props props는 properties의 줄임말로 컴포넌트의 속성값이다 //in index.js import React from 'react'; import ReactDOM from "react-dom"; const Test = ({name})=> { return ( {name} ); } ReactDOM.render(..
React/리액트를 다루는 기술 2021. 1. 9. 01:55

2. JSX

2-2. JSX란? JSX는 자바스크립트의 확장 문법이며 브라우저가 코드에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트로 변환된다 2-4. JSX 문법 감싸인 요소 컴포넌트는 반드시 하나의 부모로 이루어진 태그만 반환해야 한다 function Test(){ return ( Title Contents ) } 이런식의 JSX를 반환하는 컴포넌트는 에러를 발생시킨다 function Test(){ return ( Title Contents ) } 이렇게 의미 없이 div태그로 감싸는 것이 싫다면 Fragment라는 기능을 사용하면 된다(v16이상부터 사용가능) function Test(){ return ( Title Contents ) } //아래도 Fragment를 이용한 감싸기. 동일하게 작동한다 fu..
React/리액트를 다루는 기술 2021. 1. 8. 00:37

1. 리액트 시작

1-1. 왜 리액트인가? 프론트엔드 사이드에서 규모가 큰 애플리케이션을 관리하기 위해 수많은 프레임워크 들이 존재 프레임워크들은 주로 MVC, MVVC, MVW와 같은 구조를 차용하며 모두 Model과 View를 가짐 Model, View, Controller MVC 프로그램 개발할 때 Model, View, Controller를 나누어서 개발하는 개발 방법론이다 위의 사진과 같이 작동하며 일반적으로 User가 Controller에 요청 Controller가 Model에 반영 반영된 Model을 View가 다시 그려서 User에게 보여주는 과정을 거치게 된다 View의 문제점 위와 같은 MVC패턴은 당연하게도 View를 변형시킨다 아래와 같은 JSON 객체를 보자 { 'title': 'Hello', 'c..
React/리액트를 다루는 기술 2021. 1. 6. 01:29

Effect Hook

Effect Hook Effect Hook도 State Hook처럼 클래스형 컴포넌트에서 사용할 수 있는 메소드를 함수형 컴포넌트에서도 사용가능하게 만들어 주는데 바로 class의 생명주기 메소드들을 사용하능하게 해준다 아래에서 알아보자 사용법 import React, {useEffect} from 'react';State와 같이 임포트를 해주어야 함수형 컴포넌트 내에서 사용이 가능하다 State Hook에서 사용했던 코드에 useEffect만 살짝 추가해보자 function Counter(){ const [count,setCount] = useState(0); useEffect(()=>{ document.title = `You clicked ${count} times`; }); const..
React 2020. 11. 18. 02:09

State Hook

State Hook 우리는 컴포넌트 내부에 변수를 저장하려할 때 클래스형 컴포넌트를 만들어서 state를 사용했다 하지만 hook이 나오고 나서는 따로 클래스형 컴포넌트를 작성할 필요가 없이 hook 기능을 사용하면 된다 사용법 import React, {useState} from 'react'; 함수형 컴포넌트에서 state를 사용하기위해선 우선 useState를 임포트해야한다 function Counter(){ const [count,setCount] = useState(0); ---- 1 const handleClick = ()=>setCount(count+1); ---- 3 return ( Count {count} + ---- 2 ) } 위 컴포넌트는 버튼을 누르면 숫자가 올라가는 매우 간단한 컴..
React 2020. 11. 17. 22:25

composition

상속? Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례를 아직 찾지 못했습니다. -리액트 공식 문서 중- 적어도 리액트를 사용할 때는 상속을 잊어도 좋다는 말일 것이다 그렇다면 컴포넌트 끼리 코드 재사용이 필요할 땐 어떻게 할까? 합성 컴포넌트 담기 props.children는 컴포넌트에 들어올 자식을 나타내는 값이다 아래의 코드를 보자 function Parent(props) { return ( I'm Parent this place is children's {props.children} ); } 부모 컴포넌트는 언젠가 자기의 자식으로 들어올 props.children을 출력할 공간을 마련해둔 채 렌더링되고 있다 이제 부모 컴포넌트에..
React 2020. 11. 15. 03:58

state 끌어올리기

끌어올리기 두개 이상의 컴포넌트에서 같은 데이터를 사용하고 변경사항을 동시에 렌더링해야할 경우가 있다 그럴 때는 두개의 컴포넌트에서 가장 가까운 공통 조상까지 데이터를 끌어올린 뒤에 조작과 출력을 제어한다 아래의 코드는 리액트 공식 홈페이지의 튜토리얼에서 가져온 코드이다 import React from 'react'; import ReactDOM from 'react-dom'; const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }; function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return..
React 2020. 11. 14. 14:17

controlled component

제어 컴포넌트 리액트 폼 엘리먼트에서 사용자의 입력은 state에서 관리되고 setState로 변경된다 이때 state 신뢰 가능한 단일 출처(single source of truth)로 만들 수 있고 이때 컴포넌트가 사용자의 입력을 제어하면 이 컴포넌트는 제어 컴포넌트가 된다 class NameForm extends React.Component{ constructor(props) { super(props); this.state = { value:'' } this.handleInput = this.handleInput.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleInput(e){ this.setState({ value: e...
React 2020. 11. 13. 14:43

list, key

다수의 컴포넌트 렌더링 const numbers = [1111,2222];엘리먼트들이 담긴 리스트를 만들고 ReactDOM.render( {numbers}, document.querySelector('#root') ); 렌더링하면 보는 바와 같이 여러개의 컴포넌트를 렌더링 할 수 있다 리스트를 출력하는 컴포넌트 function List(props){ const words = props.words; const wordList = words.map(v=> {v} ) return {wordList} } const arrWords = ['hello','world','i','am','react']; ReactDOM.render(..
React 2020. 11. 6. 15:34

조건부 렌더링

조건부 렌더링 들어오는 입력에 맞게 다른 컴포넌트를 렌더링하는 코드다 function Greeting(props) { if(props.isLogged){ return ; } else { return ; } } function UserGreeting() { return Welcome Back! ; } function GuestGreeting() { return Please, sign up. } ReactDOM.render( , document.getElementById('root') );Greeting을 렌더링하고 있으며 Greeting컴포넌트에서는 props로 받아온 값에 따라서 참이면 UserGreeting, 거짓이면 GuestGreeting 컴포넌트를 반환하고 있다 동적 변화 위 코드를..
React 2020. 11. 5. 15:53