나만 보려고 만드는 REACT 문법 정리

< 함수형 컴포넌트 >

import React from 'react';
import './App.css';

const App = () => {
	const name='리액트';
    return <div className='myClass'>{name}</div>;
}
/*
function App() {
	const name = '리액트';
	return <div className='myClass'>{name}</div>;
} */
export default App; 

< 클래스형 컴포넌트 > - render( )필수

import React, { Component } from 'react';

class App extends Component {
	render() {
    	const name='리액트';
        return <div className='myClass'>{name}</div>;
    }
}
export default App;

• function App( ) { ... }, class App extends Component { ... } 여기서는 ;가 필요없다. 
• 함수이름 = ( 인자 ) => { 함수 }
• 컴포넌트 끝나면 export default App; 해서 컴포넌트 내보내기
• 컴포넌트 안, 즉 { } 안에서 const name, style={ color: 'brown' , ... } ; , return( ... ) ; ( 세미콜론 )
• return할때는 꼭 가장 큰 <div></div>가 감싸고 있어야 한다. (감싸인 요소)
• 자바스크립트 표현은 { }로 감싸서 쓴다. (<div style={myStyle}>, <h1>{name}</h1>)
• className을 쓴다. <div className="myClass"><div>가 css에서는 .myClass{ color: blue; background: black; ... }
• css를 작성하면 App.js에서 불러와야한다. ( import './App.css' 추가)

클래스형 컴포넌트에서는 state기능과 라이프사이클 기능을 사용할 수 있고, 임의메서드를 정의할 수 있다. 
( Hooks기능을 통해 함수형 컴포넌트에서도 비슷하게 사용가능 )

• props (속성)

부모 컴포넌트에서는 값 설정, 자식컴포넌트에서는 props선언, 기본값, propTypes 설정

 

- App. js :  return영역의 컴포넌트 태그에 id 처럼 props를 작성 ( props이름= '값' )

- MyComponent. js:  비구조화 할당으로 props선언, return 영역에서 객체형식으로 사용, 메인함수 밖에서 초기값 등 설정

 

클래스형 컴포넌트 에서 props를 설정할 때는 기본값과 propTypes를 class안, render함수 밖에서 static propTypes = { ... } 으로 작성하고 나머지는 같다.

 

• state (상태)

컴포넌트 내부에서 바뀔 수 있는 값 ( 클래스형: setState , 함수형: useState )

 

< 클래스형 컴포넌트 >  

• state( 객체 )의 초기값을 설정 ( construcor 메서드 or 직접 )
• 값을 조회할 땐 this. state
• 비동기적 업데이트 (객체를 인자로 받음) : this. setState( { n: n+1 } );
• 동기적 업데이트 (함수를 인자로 받음) : this. setState( ( prevState, props ) => { return { n: prevState.n+1 }; } );  or   ( { n: prevState.n+1 } ) );
• setState가 끝난 후 다른 작업을 실행하고 싶을 때는 콜백함수 등록: this. setState( {n:n+1}, ( ) => { ... } );

< 함수형 컴포넌트 >

• import { useState } 추가
• const [message, setMessage] = useState( )의 괄호안에는 초기값을 넣어준다.
• 함수를 호출하면 배열을 반환하는데 첫번째 원소는 현재상태(message), 두번째 원소는 상태를 바꿔주는 함수이다(setMessage).
• setMessage( )를 사용해 상태를 업데이트한다.

• 이벤트핸들링

이벤트: 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것

 

1. 이벤트 이름은 카멜표기법으로 작성

2. 함수형태의 객체를 전달 onClick ={ ( ) => ... } 

   ( 함수를 바로 작성할 수도 있고, 따로 정의하여 전달할 수도 있다. )

3. DOM요소에만 이벤트를 설정할 수 있다. (우리가 직접 만든 컴포넌트에 설정X)

 

< 클래스형 컴포넌트 >

• setState를 사용 (onChange={( )=> this.setState( {message: e.target.value} ); }) 
• 임의메서드를 만들어 이벤트핸들링 함수에 전달할 수 있다. (const X)   
• 1) this. handleChange = this. handleChange. bind (this); (생성자메서드(constructor)에서 바인딩)  2) handleChange= ( ) => { }
• input이 여러개일 때 )  input의 name속성을 key값으로 이용 
• handleChange= ( ) => { this. setState ({ [e. target. name] = e. target. value }); } ( input의 name에 해당하는 값에 입력값이 들어감 ) 

< 함수형 컴포넌트 >

• useState에서 정의한 상태업데이트함수 사용 ( const onChangeMessage = (e)=> setMessage(e. target. value); )
• input이 여러개일 때 ) useState를 동해 객체를 넣어주고 input의 name속성을 key값으로 이용
• const [ form, setForm ] = useState( { username: ' ', message: ' ' } );  
• const { username, message } = form;  객체
• const onChange= ( ) => { const nextForm= { ...form 기존의 form 내용을 이 자리에 복사, [e. target. name]: e. target. value 덮어씌우기 )}; setForm( nextForm ); }; 
• onKeyPress 이벤트: const handlePress= (e) => { if (e.key === 'Enter') ... }

•  ref 

DOM요소에 이름을 다는 방법 (HTML의 id와 비슷)

 

state와 className을 이용해 기능을 구현할 수도 있지만,

'DOM을 꼭 직접적으로 건드려야 할 때' ( 특정 input에 포커스 주기, 스크롤 박스 조절하기, Canvas요소에 그림 그리기 등 )는 ref를 사용한다.

 

1. 콜백함수를 통한 ref 설정

   < input ref= { ( ref ) => { this. myInput=ref } } /> // ref라는 콜백함수를 props로 전달

   // 이제 this. myInput은 < input />요소를 가리키는 멤버변수이다.

 

2. createRef 함수를 통한 ref 설정

   myInput = React. createRef( ); // 생성한 ref를 myInput이라는 멤버변수에 담아준다.

   <input ref={this. myInput } /> // ref라는 props 생성한 ref를 넣어준다.

 

컴포넌트에 ref 달기 ( 컴포넌트 내부에 있는 DOM을 외부에서 사용할 때 )

< MyComponent ref={( ref )=>{ this. myComponent=ref }} /> 

// 외부에서도 MyComponent 컴포넌트의 내부 메서드, 멤버변수, ref에 접근할 수 있다. ex ) myComponent. handleClick...

 

< 스크롤바를 맨 아래로 내리는 임의메서드 >

scrollToBottom = ( ) => {

const { scrollHeight, clientHeight } = this.box; /* 비구조화 할당 문법

const scrollHeight = this.box.scrollHeight : 스크롤이 있는 박스안의 div 높이

const clientHeight = this.box.clientHeight : 스크롤이 있는 박스의 높이 */

this.box.scrollTop = clientHeight - scrollHeight; }; //scrollTop: 세로 스크롤바 위치

 

☆ scrollTop, scrollHeight, clientHeight는  jQuery에서 제공하는 값

•  컴포넌트 반복 

map( )함수 : 파라미터로 전달된 함수를 변환해서 새로운 배열을 생성

 

const names = ["눈사람", "얼음", "눈", "바람"];

const nameList = names.map( (name) => <li>{name}</li> );  //<li>...</li>로 된 배열을 새로 생성한 후 nameList에 담는다. (DOM요소를 써도 되고 컴포넌트를 사용해도 된다.)

return <u1>{nameList}</u1>;

 

key 설정 : 배열을 렌더링했을 때 어떤 원소에 변동( 생성, 제거, 수정 )이 있었는지 알아내기 위해 사용

key값은 유일해야하므로 데이터가 가진 고윳값이나, map함수에 전달되는 콜백함수의 인수인 index값을 key로 사용한다.

const nameList = names.map((name, index) => <li key ={index}>{name}</li>);

 

< 데이터 추가 기능 > - concat으로 새로운 배열을 생성해서 업데이트 

const onClick = ( ) => {

  const nextNames = names. concat ( {

  //nextNames: id는 nextId이고 text는 inputText인 새로운 name 배열

  id: nextId, //초기값 5

  text: inputText,

});

  setNextId(nextId + 1); //nextId+1을 업데이트

  setNames(nextNames); //위에서 만든 배열을 업데이트

  setInputText(""); //inputText 초기화

};

 

< 데이터 제거 기능 > - filter으로 원하는 원소만 분류, 제거해서 업데이트

const onRemove = (id) => {

  const nextNames = names.filter((name) => name.id !== id); //배열 내장 함수 filter사용: 원하는 원소만 분류, 제외

  setNames(nextNames); //분류한 값은 업데이트

};

 

< key값 > - 데이터가 가진 고유값 이용

const nameList = names.map((name) => (

  <li key={name.id} onDoubleClick={( ) => onRemove(name.id)}>

    {name.text} </li>

));

• 라이프사이클 메서드

라이프사이클 메서드를 사용하여 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나 컴포넌트 업데이트 전후로 작업을 처리할 수도 있다.

( 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 Hooks기능을 사용해서 비슷한 작업을 처리할 수 있다. )

 

• getDerivedStateFromProps( nextProps, prevState ): props로 받아온 값을 state에 동기화, 앞에 static 키워드를 붙여서 인스턴스 메소드로 선언
• componentDidMount( ) : 컴포넌트를 다 만들고, 첫 렌더링을 마친 후 실행
• shouldComponentUpdate( nextProps, nextState ) : props 또는 state를 변경했을 때 리렌더링 여부를 지정, this. props ( state )로 현재 상태 접근
• getSnapshotBeforeUpdate( prevProps, prevState ) : 브라우저에 반영되기 직전에 호출, 반환값은 snapchot으로 전달됨
• componentDidUpdate ( prevProps, prevState, snapshot ) : 리렌더링 후 실행, 이전에 가졌던 데이터에 접근
• componentDidCatch( error, info ) : 렌더링 도중 에러가 발생했을 때 오류 UI를 보여준다 (this. props. children 으로 전달되는 컴포넌트에서 발생하는 오류만 ) 

• Hooks

1. useState : 가변적인 상태를 지닐 수 있도록 해준다.

   const [ value, setValue ] = useState( 0 //초기값  ) ;

           //state, state를 업데이트하는 함수 

 

2. useEffect : 기본적으로는 특정 작업이 렌더링될 때마다 실행되며( 뒷정리 함수도 ), 두번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 다르다.

( 배열 안에 값을 넣으면 그 값이 업데이트될 때만 실행, 빈배열을 넣으면 각각 마운트, 언마운트될 때만 실행 )

   useEffect( ( ) => { //실행할 내용  return( ) => { //뒷정리 함수에서 실행할 내용 }; } , // [ ] );  

 

3. useReducer : useState와 유사, 상황에 따라 다양한 상태를 다른값으로 업데이트할 때 사용한다.

( 리듀서 함수를 만들어주고, 메인함수에서 useReducer를 사용 )

function reducer( state, action ) { return{ ... }; } : 현재상태, 액션값을 전달받아 새로운 상태를 반환한다.

const [ state, dispatch ] = useReducer( reducer, { value: 0 //리듀서함수에 들어갈 상태의 초기값} )

//dispatch( action ): 파라미터로 액션을 넣어주면 리듀서 함수가 호출되어 ( action type에 맞게 )실행

 

4. useMemo : 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

   const avg = useMemo(( )=> getAverage( list //이 값이 바뀌었을 때만 해당 함수를 호출 ), [ list ] //바뀌지 않으면 이 값 사용 );

 

5. useCallback : 만들어놨던 함수를 재사용할 수 있다.

  const onChange = useCallback(( ) => { 생성하고 싶은 함수 } , [ 이 값이 바뀌었을 때 함수 생성 // 빈 배열을 넣으면 컴포넌트가 처음 렌더링될 때만 함수 생성] );

 

6. useRef : ref와 로컬변수를 사용할 수 있게 해준다.

 

   const inputEl = useRef( null ); //useRef를 사용해서 ref객체인 inputEl 설정

 

   const RefSample = ( ) => {

         const id = useRef( 1 ); //로컬변수 초기값 설정

         const setId = ( n ) => {

                 id. current = n ; //로컬변수 수정

    };

    return <div>refsample</div>;

};

 

7. 커스텀 Hook만들기 : 나만의 Hook을 만들어 로직을 재사용할 수 있다.

   새로운 컴포넌트 파일을 만들어서 내가 만든 Hook을 내보낸다. 

    export default function useInputs( initialForm ) { ... return[ ... ]; }