2021.04.14
!!!팁
리액트 JSX는 꼭 하나의 태그에 감싸져 있는 형태여야만 한다. JSX문법을 맞추기 위해 하나의 큰 div 안에 담아서 컴파일 할 수 도 있겠지만, 추천하지 않는 방법이다. 이를 위해서는,
<Fragment></Fragment>, <> </>
이러한 Fragment를 사용하기로 하자.
React를 배우기 전에 알아야 할 자바스크립트 기초
리액트 라이프 사이클(Life cycle)
https://ljh86029926.gitbook.io/coding-apple-react/2/undefined-1/what-is-life-cycle
리액트 라이프 사이클이란 컴포넌트의 생명주기를 뜻한다. 컴포넌트가 생겨나고 업데이트로 변경되며 사라지는 일련의 과정을 이야기한다.
라이프사이클은 순차적으로 실행되며, 굉장히 효율적으로 흘러간다는 점을 기억하자. 라이프사이클은 크게 처음 생성 될 때, props나 state의 변경으로 업데이트 되었을 때, 컴포넌트가 더 이상 브라우저에 보일 필요가 없을 때 이다. 아래 그림을 보면서 이해하자.
기존 컴포넌트가 생겨날 때 getDefaultProps()와 getInitialState()는 비추천으로 사라지게 되었다. 그냥 빼고 기억하자.
컴포넌트가 로딩되기 시작하는 Mounting
constructor 클래스 생성자
이것은 어찌보면 당연합니다. 어떤 클래스를 만들더라도 생성자보다 더 빨리 샐행되는 로직은 없기 때문입니다. 하지만 지금의 리액트에서는 생성자를 건드릴 일이 거의 없어졌기 때문에 가볍게 넘어가도록 하겠습니다. 아직 클래스 인스턴스가 막 실행된 시점이기 때문에 이 시점에는 브라우저에서 우리가 작성한 JSX가 보이지 않습니다.
실제 로딩이 이루어지는 render
constructor메소드가 실행된 이후에는 render 메소드가 실행됩니다. render메소드는 메소드 이름 자체로 어떤 일을 하는지 나타내고 있습니다. 이 메소드가 실행되면서 JSX가 HTML로 변환되어 우리가 보는 웹 브라우저에 나타나게 됩니다. 그러나 한가지 명심해야 할 점은, render메소드는 컴포넌트가 로딩될 때에도 실행되지만 컴포넌트의 데이터 (state, props)가 업데이트 되었을 때에도 동작한다는 점 입니다. 그렇기 때문에, render 메소드에서 setState나 props를 변화시키는 메소드를 가능하면 수행하지 않는 것을 추천합니다. (잘못하면 무한루프가 일어나게 되겠죠?)
처음 로딩이 끝난 뒤에 수행되는 componentDidMount
mounting의 마지막 부분입니다. render 메소드에 있는 모든 부분들이 브라우저에 나타나게 되었을 때만 실행되는 메소드 입니다. 컴포넌트의 데이터가 업데이트 되어도 이 메소드는 다시 수행되지 않습니다. 오직 초기 컴포넌트의 로딩 이후에 한번만 실행되는 라이프사이클 메소드 입니다. 이제 여기서 DOM을 직접 조작할 수 있게 됩니다. (하지만 리액트는 DOM조작을 직접 하지 않고도 많은 일을 할 수 있습니다.)
컴포넌트의 업데이트 Updating
리액트는 컴포넌트의 업데이트 감지를 오직 현재 컴포넌트에서 state나 props의 변경 유무로만 판단합니다.
state, props의 변경
위 그림에는 forceUpdate라고 해서 메소드가 하나 더 있는데요, 이는 강제로 재 렌더링을 하게 끔 도와주는 메소드 입니다. (하지만 코딩애플 강의에서는 다루지 않을게요.) 만약 우리가 setState를 이용해서 state를 하나 업데이트 했다고 가정해 봅시다. 그러면 다음에는 어떤 메소드가 수행될까요?
데이터가 변경이 되었으니 다시 render를 해야지 !
state의 변경이 일어났습니다. 리액트는 효율적으로 state의 변경사항을 감지해 다시 변경된 부분을 그려줍니다.
변경이 완료된 이후 수행되는 componentDidUpdate
컴포넌트의 변경이 완료되었을 때에 수행되는 메소드 입니다. 이 메소드는 조금 복잡한 작업을 수행하기에 최적화 되어있는 메소드 인데요, render메소드가 실행되어 업데이트 된 state, props와 업데이트 되기 전인 state, props를 가지고 비교 작업을 가능하게 해 줍니다.
컴포넌트의 삭제 Unmounting
컴포넌트에게 안녕을, componentWillUnmount
컴포넌트가 사라질 때에 수행되는 메소드 입니다. 여기서는 우리가 컴포넌트 내에 할당해 놓았던 여러가지 변수들을 해제시켜줄 수 있습니다. (setInterval, eventListener 같은 것들)
자식 컴포넌트와 부모 컴포넌트의 실행 순서는 다음과 같다. 실행의 시작은 부모 컴포넌트가 먼저 되고 render도 먼저 하지만, 자식 컴포넌트의 로딩이 먼저 끝나는 것을 볼 수 있다. componentDidUpdate도 마찬가지로, 자식의 render+update가 끝난 이후에야 부모 컴포넌트의 componentDidUpdate가 진행된다.
함수형으로 자식 컴포넌트에서 부모 컴포넌트 state값 조정하기
여기서 Nav bar의 버튼을 눌렀을 때 아래 content 내용이 바뀌게 하고 싶었다. 클래스 형으로 하면 이미 한번 했던 거라 할 수 있었지만, 함수형으로는 도통 방법이 보이지 않았다. 함수형은 컴포넌트 내에서 state를 사용하거나 단순히 값을 넘겨주는 것은 쉬웠지만 좀 더 복잡한 내용을 구현하기에는 어려웠다. 검색해봐도 잘 나오지 않고 답이 별로 없는걸 보면 단순히 내가 모르는 것 이상의 무언가가 있는 것 같다.
아무튼 그래서 비스무리하게 구현을 하긴 했다.
이 분을 따라 했었는데,
App.js에서 이렇게 새로운 함수를 만들고 이벤트 객체를 넣어서 TopBar에 보내준다.
이후 TopBar에서 props로 받아서 handleSummaryClick이라는 함수를 만들어서 받고 onClick이벤트로 넣어주었다.
이상한건 단순히 String이나 num값을 넘겨주는 것은 props로 넘겨줘도 들어가는데 함수로 들어가고 복잡해지면 넘어가지 않았다. 그래서 고생을...
아무튼 결론적으로는 Router를 공부해서 사용하는 것이었다. 페이지 이동 기능을 위해 아예 Router라는 새로운 라이브러리가 나온걸 보면 내가 모르는게 아니라 어렵고 복잡한 무언가가 있기 때문이 아니었을까...
그래서 React Router
https://www.youtube.com/watch?v=WLdbsl9UwDc
https://reactrouter.com/web/guides/quick-start
React Router는 간단히 이야기해서 원하는 주소로 가면 원하는 위치에 원하는 페이지가 새로고침 없이 보여질 수 있는 방법을 제시해주는 라이브러리다. 아주 강력하다.
시작하기 위해서는, 역시 React와 같이
npm install react-router-dom
이렇게 가장 최상위 컴포넌트인 App을 BrowserRouter로 감싸준다.
다음은 원하는 위치(div 내부라던지)에 원하는 컴포넌트를 입력하고 Route로 감싸고 path로 주소를 지정해준다. exact 없이 그냥 사용하면 맨 위의 / 주소가 아래에 /Project 등 다른 컴포넌트들 주소에까지 포함되어 있음으로 Summary 뿐만 아니라 Project등 다른 컴포넌트도 보이게 된다. 이를 방지하기 위해, Switch로 하나만 보여지게 하고 맨 위의 "/" 주소에 exact를 넣어준다.
그리고 각 컴포넌트를 진입하기 위한 버튼에 Link, 혹은 NavLink to를 걸어준다. 이때, NavLink는 해당 링크가 활성화 되었을 때 'active'라는 이름의 class를 부여한다. 즉, 이를 이용하면 활성화 되었을 때만 특정한 이벤트를 부여한다던지 색을 바꾼다던지 하는 동작이 가능하다는 것.
하지만 간편하게 하려면, 해당 링크를 활성화했을 때 activeStyle로 스타일을 지정할 수 있다. CSS 클래스를 적용하고 싶다면 activeClassName 값을 지정한다.
이렇게 작성하면 해당 링크가 활성화 됐을 때 색상이 바뀌게 된다. 이때, router와 마찬가지로 / 패스에 스타일을 적용하면 해당 패스가 포함된 아래 패스들을 눌러도 /패스가 활성화 된걸로 처리되어 색상이 계속 바뀌어있게 된다. 이를 막기 위해 exact를 추가해준다. activeStyle이든, activeClassName이든 to 뒤에 놓을 것. NavLink to가 한 세트인줄 알고 뒤에 놓다가 한참 헤맸다.
또한, 이유는 모르겠는데, NavLink 자체에 스타일을 적용하려면 a태그에 주면 된다. a태그를 대체하는 태그라서 그런가? 이것도 검색해도 잘 안나와서 한참 헤맸다.
useParams
리액트 라우터에서 파라미터를 넘겨주는 방법에는 useParams라는 방법과 쿼리 방법이 있다. 일단 나는 userParams를 알아보았다.
이렇게 원하는 Route의 주소 끝에 :주소값 을 넣어준다.
값을 받는 컴포넌트에서 들어갈 데이터를 정하고,
이렇게 match라는 객체로 받아서 사용하면 된다. match.params.username이라던지... 근데 이거 예제가 좀 헷갈리는 예제인 것 같다.
