State와 LifeCycle

2021/01/10

1. State

: React Component의 상태 = Component에 대한 변경 가능 데이터를 뜻한다.

state는

• 사용자가 정의한다.
• 자바스크립트 객체와 같다.
• 직접 수정하면 안된다!!! setState를 사용해서 수정해야 한다!!
  

2. LifeCycle

: component의 생명 주기

• Mounting constructor로 생성. render시키기. component생성. componentDidMount() 함수 호출.
  
• Updating 새로운 props setState (state 변경) forceUpdate (강제 update) component update componentDidUpdate() 함수 호출.
• UnMounting componentWillUnmount() 함수 호출. (unmount되기 직전에!!)
  

3. Event

Event = 사건(Camel Case 사용)

Event Handler(Listener) = 이벤트를 실행시키는 함수

Camel Case란?

→ onClick 처럼 on이후에 나오는 단어들의 첫 글자는 대문자로 표기

argument

→ 이벤트 핸들러(함수)에 전달할 데이터 = 파라미터

4. Conditional Rendering (조건부 Rendering)

//Conditional rendering
function Greeting(props){
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
        //true이면
        return<UserGreeting />;
    }
    //false이면
    return <GuestGreeting />;
}

4. Inline Conditions

: 조건을 코드 안에 집어넣는 것

• if문은 &&사용 true && expression → expression →조건을 만족하면 rendering 실행. false && expression → false →조건을 만족하지 않으면 rendering x
  
• if-else문은 ? 사용 condition ? true : false → condition이 true이면 :의 앞에꺼를 실행.

    false이면 :의 뒤에꺼를 실행.

• null을 return 하면 component가 rendering이 되지 않음.

return(
      <div>
          <Greeting isLoggedIn={isLoggedIn} />
          {button}

          {/* 로그인 상태이면 날짜가 출력되도록 */}
          {isLoggedIn &&
              <div>
                  <h5>{new Date().toLocaleString()}</h5>
                  <h5>{'How are you today?'}</h5>
                  {/* {notiCount > 0 &&
                      <h5>{'New noti: ' + notiCount}</h5>} */}
                  {notiCount > 0 ? 
                      <h5>{'New noti!: ' + notiCount}</h5>
                      : <h5>{'No notification'}</h5>}
              </div>}
                {/* 인접한 jsx는 하나로 묶어줘야함->div로 묶음 */}
                {/* &&를 중복으로 사용할 수도 있다 */}
                {/* <h5>{'No notification'}를 null로 하면 아무것도 리턴x */}
            </div>
        );