리액트 기본 개념 정리( JSX, props & state, 생명주기 )

리액트 기본 개념 정리

<1> JSX

JavaScript XML 줄임말

1. 컨테이너 element에 포함시켜야 함.-> 항시 <div> 태그를 묶어준다.
2. javascript 변수를 사용할 때는 {} 중괄호를 이용해 사용해야 한다.
3. 스타일 설정할때는 camelCase로 처리해야된다.
4. 주석을 사용할 때는 { /.../ }

<2> props(프로퍼티) & state(스테이트)

props: 컴포넌트 내부의 불변 데이터 ( 컴포넌트를 외부에서 조작할 때 사용된다. )

프로퍼티는 상위 컴포넌트에서 하위 컴포넌트로 전달할 때 사용하는 데이터

props는 컴포넌트 내부에서 값을 변경할 수 없다.

예를 들어, App 클래스내에 MyComponent를 포함하고 있으면, App > MyComponent 방향으로 전달됨.

 

class App extends React.Component {
    render(){
        return(
            <div className="body">
                <MyComponent name="message">
            </div>
        );
    }
}
 
class MyComponent extends React.Component{
    render(){
        const name = this.props.name;
        return <span>{name}</span>;
    }
}

 

state: 컴포넌트 내부의 유동 데이터 ( 컴포넌트를 내부적으로 상태 관리할 때 사용된다. )

props는 컴포넌트 내부에서 값을 변경할 수 없다. 그렇다면, 물건 수량을 입력하거나 상품에 댓글을 남기는 등 '값을 바꿔야 하는 경우'는? State를 사용한다.

값을 저장하거나 변경할 수 있는 객체.

생성자 즉, constructor에서 this.state={}으로 설정
값을 수정할 때에는 this.setState({ ... }), 렌더링 된 다음엔 this.state = 절대 사용하지 말것

함수는 자바스크립트 함수 만들듯 만들면 됨.

state 사용시 주의할 점
1. 생성자에서 반드시 초기화!
2. state값을 변경할 때는 setState()함수(상태관리함수)를 반드시 사용!
3. setState()함수는 비동기로 처리되며, setState() 코드 이후로 연결된 함수들의 실행이
   완료된 시점에 화면 동기화 과정을 거침.

state 사용시 주의할 점 

1. 생성자에서 반드시 초기화! 
   -> 초기화를 하지 않으면, state값에 접근할 수 없음. 마땅한 초기값이 없다면, 빈값이라도! 
2. state값을 변경할 때는 setState()함수(상태관리함수)를 반드시 사용! 
   -> render()함수로 화면을 그려주는 시점은 리엑트 엔진이 정함. 
      즉, state값을 변경해도 render()함수는 새로 호출되지 않음. 
      하지만, setState()를 사용하면, 리엑트엔진이 자동으로 render()함수를 호출함. 
      setState()의 함수의 인자로 함수를 전달하면 이전 state 값을 읽는 과정을 생략할수 있음.(종종사용) 
3. setState()함수는 비동기로 처리되며, setState() 코드 이후로 
   연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거침.

4. 필요시엔 forceUpdate()함수 사용

    -> 출력 검증 작업 없이 함수가 호출될 때마다 새롭게 화면을 출력하고 싶으면

        클래스 인스턴스변수와 화면을 강제로 출력해주는 forceUpdate()함수를 사용.

<3> Map

데이터배열을 랜더링할때 사용
map() 메소드는 파라미터로 전달된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성함.

 

const todoList = [
    { taskName: '빨래하기', finished: false },
    { taskName: '공부하기', finished: true  }
];
 
const todos = todoList.map(todo => <div>{todo.taskName}</div>);
 
//결과
// [<div>빨래하기</div>, <div>공부하기</div>]

<4> 생명주기

Mounting
컴포넌트가 브라우저상에 나타난다는 것

Updating
컴포넌트의 props나 state가 바꼈을때

Unmounting
컴포넌트가 브라우저 상에서 사라질 때

 

constructor(생성자)
component가 생성될때 가장 먼저 생성되는 것

항상 super()함수를 가장 위에 호출해야 함

 

getDerivedStateFromProps

상위 컴포넌트에서 전달받은 프로퍼티로 state값을 연동할 때 주로 사용.

Props로 받은 값을 State로 동기화 하고 싶으면 쓴다.

 

render

데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출되는 함수.

어떤 DOM을 만들게 될지, 태그엔 어떤 값을 전달할 것인지를 결정.

 

componentDidMount

render()함수가 JSX를 화면에 그린 이후에 호출되는 함수
D3, 차티스트와 같은 차트 라이브러리나, 특정 돔에다가 차트를 그려달라.
Ajax 요청도 여기서 하게 됨.

 

shouldComponentUpdate ★

프로퍼티를 변경하거나 setState() 함수를 호출하여 state값을 변경하면 '화면을 새로 출력해야 하는지' 판단하는 함수.

컴포넌트가 업데이트 최적화될때 사용
부모컴포넌트가 리렌더링되면 자식도 리렌더링 될때가 있음.
화면 새 출력과 데이터 변화 비교 작업을 함으로 리엑트의 성능에 굉장히 영향을 많이 줌.

화면에 대한 검증이 필요한 경우 이 함수를 사용해야 함.

 

componentWillUnmount()

컴포넌트가 소멸직전에 호출되는 함수. 

ex. setInterval함수를 컴포넌트내에 사용했다면, clearInterval()함수로 해제해야 함.