What is REACT!

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 란다...
리엑트를 사용하면 애플리케이션의 페이지 기능별로 컴포넌트를 나눠 작업할 수도 있고 JSX 방식을 이용해

function App(){

  return (
  <h1> 안녕하세요 리엑트! </h1>
  )
}

위와 같이 컴포넌트안에 레이아웃을 짤수 있어 가독성도 좋은 편이다. 만약 JSX 안에서 자바스크립트 문법을 사용하고 싶다면 { } 중괄호를 이용해 자바스크립트 문법도 사용할 수 있다!

function App(){

  return ({
  for(let i = 0 ; i < 3 ; i++){
	return <h1> 안녕하세요 리엑트! </h1>
}
  })
}

바로 위와 같이 자바스크립트 문법을 사용한다면 <h1> 안녕하세요 리엑트! </h1> 가 3번 생성 될 것이다.

리엑트의 가장 큰 장점은 뛰어난 가독성과 상태관리를 통해 상태에 따라 UI가 페이지 리로딩 없이 다시 랜더링된다는 점인 것 같다.

Props

props는 상위 컴포넌트가 하위 컴포넌트에 데이터를 전달하거나 데이터를 받아올때 사용한다.

State

리엑트에서 prop의 값이나 state의 값이 바뀌면 그 state나 props를 갖고있는 컴포넌트의 rander 함수가 다시 호출된다. 그리고 rander 함수가 다시 호출됨으로써 그 rander 함수 하위에 있는 컴포넌트들이 갖고 있는 각각의 랜더 함수들도 다 호출된다. 그로써 화면이 다시 그려지게된다.

어떤 HTML을 그릴것인가 라는 것을 결정하는 함수가 바로 rander이기 때문이다.

Props vs State

• props는 외부로부터 전달받은 값
  예시 : 이름, 성별

• state는 내부에서 변화하는 값
  예시 : 나이, 현재 사는 곳, 취업 여부, 결혼/연애 여부

이벤트

이벤트 태그들이 갖고있는 기본적인 동작을 막는 방법은 이벤트함수의 첫번째 인자에 preventDefault 함수를 실행하면 막을 수 있다.

상위 컴포넌트가 하위 컴포넌트에게 값을 전달 할때에는 하위 컴포넌트의 조작장치인 Props 를 통해 전달하고
하위 컴포넌트가 상위 컴포넌트의 어떠한 값을 바꾸고 싶을 땐 이벤트를 통해서 바꿀 수 있다.

state를 갖는 컴포넌트를 만드려면 ES6 class 컴포넌트를 이용해야 한다.

리엑트에서 컴포넌트 만들기

리엑트에서 컴포넌트를 만드는 방법은 두가지가 있다.

바로 함수형과 클래스형이다.

둘은 차이점이 있는데 제일 큰 차이점은 현재 상태를 가지려면 클래스 컴포넌트로 구성이되어야한다.

함수형도 상태를 가질 수는 있다. 생긴지 얼마 안된 HOOKS를 이용하면 함수형 컴포넌트에서도 상태를 관리할 수 있게 된다.

HOOKS

리엑트를 처음 접한 방식은 class 컴포넌트를 이용하는 방식 이였지만 HOOKS를 접하고 나니 정말 편하고 간단하고 상태를 변경하기도 편하다는 것을 느꼈다. class 컴포넌트에서 상태를 변경하려면 setState를 통해 변경해야했고 this를 바인딩 해줘야 했지만 hooks에서는 그러한 것을 안해도된다.

HOOKS에 대표적인 메소드는 useState랑 useEffet가 있는데

useState를 통해 상태를 관리할 수 있고 useEffet를 통해 클래스 컴포넌트에서 사용했던

componentWillMount 와 componentWillUnmount 를 대체할 수 있었다.

각종 데이터타입에 따른 useState 사용 예시를 아래와 같이 구현했다.

간단하게 설명하자면 useState 앞 배열 첫번째에는 현재 상태가 할당되어있고 배열 두번째에는 상태를 바꾸는 함수고 useState 뒤에있는 소괄호에는 초기값이 존재한다.

function App() {
    const [count, setCount] = useState(5);
    const [mode, changeMode] = useState('read');
    const [arr, pushArr] = useState([1,2,3])
    const [obj, update] = useState({ name : '김코딩', age : 20 })
    const [email, submitEmail] = useState('aaa123@aa.com')
    

  return (
    <>
    <h1>{mode}</h1>
    <h1>{count}</h1>
    <h1>{arr}</h1>
    <h1>이름은 {obj.name} 나이는 {obj.age}</h1>
    <h1>이메일은 {email}</h1>
    <h1>{JSON.stringify(obj)}</h1>
    {follow(mode)}
    <button onClick ={function(){
      
      setCount(count + 1)
      
      changeMode('write')
      
      let newarr = Array.from(arr)
      newarr.push(count)
      
      pushArr(newarr)
      
      update({ name: '박해커',  age : obj.age + 1})
      
    }}>updated!</button>

    <input placeholder = 'email' value ={email} onChange = {(e) => {
      const { target : {value} } = e
      console.log(value, e)
      submitEmail(value)
    }}></input>
    </>
  );
}

}

리엑트를 사용하다 아쉬운점

처음 리엑트를 사용했을땐 코드가 짧고 컴포넌트 깊이가 깊지 않아서 그렇게 불편한점을 느끼지 못했지만 점점 깊은 컴포넌트를 다뤄보니 맨 밑의 자식 컴포넌트에서 부모 상태의 접근하기 무척 힘들었다. 이유는 자식이 부모 상태에 접근하려면 부모에서 자식까지의 모든 컴포넌트에게 props로 전달해야만 자식까지 도달하기 때문이다. 자식에서 부모 상태를 변경할때도 마찬가지였다. 이러한 단점은 Redux를 통해서 해결할 수 있다고 하던데 다음은 Redux를 정리해 보는 시간이지 않을까 싶다.