오늘의 나는 무엇을 잘했을까?
학습을 할 때는 집중을 잘 했던 것 같다. 최근 집중을 잘 못한 것 같은데 오랜만에 집중해서 공부를 했다.
React를 배우며 책을 한 권 사서 읽고 있는데, 내용을 정리하고 실습을 따라 하다 보니 조금 더 이해가 잘 되는 것 같다. 앞으로도 개념을 공부하는 것과 실습을 병행하며 체득하려는 노력을 해야겠다.
오늘의 나는 무엇을 배웠을까?
1. 네트워크 로딩 처리하기
웹사이트에서는 보통 request를 처리하는 동안 로딩 중임을 사용자에게 알려주거나 특정 기능을 사용하지 못하도록 막는다.
가령 내용을 더 볼 수 있는 버튼이 있어 클릭 시마다 서버에 request를 보내 데이터를 받아와 보여준다고 가정해 보자. 네트워크가 느려 인내심이 부족한 사용자가 로딩을 기다리지 못하고 버튼을 여러번 눌러 동일한 request를 여러번 보내게 되면 화면에도 동일한 데이터들이 버튼을 누른 횟수만큼 표현될 것이다. 이러한 문제를 막기 위해 네트워크 로딩 처리를 해야 한다.
네트워크 request 중일 때 더 보기 버튼을 비활성화 상태로 만들어 보려 한다.
네트워크가 request 중이면 true 아니면 false 값을 갖는 state를 만들어보자.
isLoading 이라는 state를 만들고 초깃값으로 false 를 줬다.
이 state를 handleLoad 함수에서 아래와 같이 사용한다.
result 라는 변수를 선언한 뒤 try 문에서 네트워크 request를 처리한다. 이 때 request를 시작하기 전에 setter 함수로 state 값을 true 로 변경해준다.
에러 처리는 단순히 콘솔에 출력만 해 주었다. 마지막으로 request의 성공 실패 여부와 상관없이 finally 문을 통해 state 값을 false 로 변경해 주었다.
isLoading 값이 true 일 때 버튼이 비활성화 되도록 하기 위해 버튼의 disabled prop으로 isLoading 을 넘겨주면 마무리 된다.
2. 네트워크 에러 처리하기
앞선 네트워크 로딩 처리에서는 에러를 단순히 콘솔에 출력하는 방식으로 처리하였다. 다른 방식으로 에러를 처리해 보려 한다.
먼저, 에러객체나 null 을 값으로 가지는 state를 만들어보자, 초깃값으로는 null 을 준다.
다음으로 handleLoad 함수를 수정해 준다.
try 문에서 loadingError state를 null로 만들어주고, catch 문에서는 에러 객체로 변경해 주었다.
마지막으로 loadingError state 값에 message 프로퍼티가 있을 경우 화면에 출력하도록 만들기 위해
위 코드를 추가하였다.
에러 메세지가 잘 나오는 것을 확인할 수 있다. 지금까지는 임시로 에러를 throw 해주었을 때의 경우였다.
만약 request를 보내는 주소를 잘못된 경로로 변경하고 화면을 살펴보면
404 response가 도착하고,
에러 메세지가 위와 같이 뜬다. 왜 이런 메세지가 출력될까?
getReviews 함수를 살펴보면
reponse 에 상관없이 항상 json메소드를 실행했다. 이를 변경해 주기 위해 그 앞에
코드를 추가해 주면 오류가 나는 경우를 체크하고 에러를 던질 수 있다.
에러를 처리하기 위해 관련된 state를 만들고, try-catch 문을 통해 에러 객체를 받고, 에러 상태를 state로 관리하며 화면에 보여줄 수 있다.
3. Ref
React의 Ref는 돔 요소들을 직접 조작할 수 있게 해준다. Reference의 줄임말로, 참조라는 뜻이다.
useRef
리액트에서 Ref 객체를 생성하기 위해서는 함수 useRef 함수를 활용해야 한다.
useRef(initializer)useRef 함수는 인수로 전달한 값을 초깃값으로 하는 Ref 객체를 생성한다.
아래 코드의 예시를 통해 useRef 함수를 어떻게 사용하는지 알아보자
DOM 요소인 input 태그에 접근하는 Ref를 만들었다.
위 코드는 input 에 값을 입력하고 버튼을 누르면 입력 내용을 alert 창으로 띄워준 후 입력 폼의 입력값이 사라지게 한다. textRef.current 는 textRef가 현재 참조하고 있는 돔 요소를 말한다. 이 요소의 value 값을 공백 문자열로 변경해 주는 코드가 이벤트 핸들러에 등록 되어 있으므로 해당 동작이 일어나게 된다.
React 앱 설계
React가 권장하는 애플리케이션 설계 방식에 대해 알아보았다.
React는 컴포넌트 간의 데이터 전달을 Props 를 통해 한다. 이 때 전달 방향은 언제나 부모로부터 자식에게 향하고, 이를 단방향 데이터 흐름이라고 한다. 데이터 흐름을 쉽게 이해할 수 있기 때문에 관리에 용이하다.
이에 반해 State 를 변경하는 이벤트는 자식에서 부모를 향해 전달된다. 부모 컴포넌트에서 State 를 변경하는 함수를 Props 로 전달해 주면 자식이 부모의 State 를 대신 업데이트 해 줄 수 있다.
결국, React 앱을 설계할 때 데이터는 위에서 아래로, 이벤트는 아래에서 위로 향하도록 설계해야 한다.
오늘의 나는 어떤 어려움이 있었을까?
많은 인풋이 단기간에 들어오다보니 머릿속에서 정리가 안되고 개념 사이의 혼동이 되는 것 같다.
앞으로 TIL을 작성할 때는 단순히 학습한 내용을 나열하기 보다는 모르는 부분과 아는 부분을 잘 구분해서 모르는 부분을 중점으로 검색해보고, 공부한 내용을 정리하는 것이 더 좋겠다는 생각을 했다.
내일의 나는 무엇을 해야할까?
- Weekly Mission
- 리액트 컴포넌트의 라이프 사이클 알아보기
