코딩일기 3주차

 

2. 27.

 

오늘은 리액트에서 여러개의 input의 상태관리를 어떻게해야 하는지를 이해하기 위해 노력했다.

input에서 변화하는 값이 여러개인 경우에는 따로따로 useState를 만들어서 관리하는 것보다, useState의 초기값을 객체를 통해 선언을 해준다.

onChange함수도 여러개로 만들지 않고 변화가 발생하였을때 e.target.name을 통해서 하나의 함수만 만들어서 관리할 수 있다.

[ e.target.name ]: e.target.value로 기존의 내용에 덮어서 쓰면, 이벤트타깃인 Input의 name으로 만들어준 값이 key값이 되고, 그 key를 가진 것을 새로운 내용으로 덮는다. 이러한 방식으로 name을 통해서 key에 접근하고 새로운 내용을 업데이트할 수 있다. 굳이 name으로 관리를 해주는 이유는 onChange 함수를 여러개 선언하지 않고 하나만 선언해도 여러개의 input의 상태관리가 가능하기 때문이다.

자세한 내용은 블로그에 기록해두었다.

 

리액트 여러개의 input상태관리 (State관리)

 

엄청 대단한 내용은 아니지만, 이해하기 위해 노력했고 드디어 이해했다는 점에서 성취감을 느낀다. 💪💪💪 

 

 

 

2.28.

 

오늘은 useRef에 대해서 공부하고 활용을 해보았다.

useRef는 리액트 훅 가운데 하나로, reference의 줄임말이다.

특정한 DOM요소에 쉽게 접근이 가능하며, 불필요한 재렌더링을 막아서 성능향상에 기여한다. 또한 전생애주기를 기억하여 언마운트되기 전까지는 값을 기억하는 특징을 가지고 있다.

 

useRef를 사용하는 대표적인 방법인 input요소에 focus를 주는 코드를 만들어 보았다.

 

1️⃣const nameFocus = useRef();를 통해서 변수를 선언해주고 useRef의 초기값으로 아무것도 넣지 않았다.

초기화버튼에 onClick이 일어나면 실행되는 코드에 2️⃣nameFocus.current.focus(); 를 넣고

3️⃣<input ref={nameFocus} />

input의 ref속성안에 {nameFocus}값을 넣었다.

 

전체코드중 useRef를 이용한 코드만 따로 빼서 보면 아래와 같다.

const nameFocus = useRef();

const onReset = () = > {
.......
nameFocus.current.focus();
};

return(
<input ref={nameFocus} />

<button onClick={onReset}>초기화 </button>

 

useRef에 대해 정리하고 코드를 어떻게 활용했는지는 블로그에 자세하게 기록해두었다.

리액트 useRef란

 

또 실행컨텍스트에 대해서 공부했는데, 전에도 공부했던 내용이라서 더 잘이해가됐다. 최근에 호이스팅과 TDZ, 함수선언문과 함수표현식에 대해서도 공부했는데 연결이 되는 내용이라서 반복하면 할수록 더 깊은 이해가 되는것같다. 이 다음에 반복하면 또 다르게 보이겠지?

실행컨텍스트와 렉시컬환경에 대해서도 블로그에 정리를 했다.

 

자바스크립트 실행컨텍스트/ 렉시컬환경(환경레코드,외부환경참조)

 

사실 공부하면서 블로그를 쓰는게 시간이 많이 들어서 안했는데, 그래도 나중에 내가 다시 보려고 기록하려고 노력중이다. 어떤 설명을 봐도 결국에는 내가 스스로 정리한 내용이 머리에 제일 잘들어오더라 🤓

나중에 코드를 엄청 잘치면 블로그가 조금 뜸해질지도 모르겠지만 ㅋㅋ 아직은 공부할게 많아서 시간만 난다면 공부하는 내용들을 기록해두고 보고 또 봐야겠다. 블로그에 기록해두니까 밖에서도 갑자기 생각나면 복습을 할수있는것도 장점이다. 😇 오늘도 내일도 화이팅!!

 

 

3.1.

 

3월 1일이라 그런지 공부하는 곳에도 사람이 조금 적어서 널널하게 공부할 수 있어서 좋았다 😄

 

 

우리집 식물들한테 물주는 날 💦💦💦

복많이 들어오라고 복자 돌림으로 이름도 지어주었다

(좌대복, 우뾱뾱 ㅋㅋ)

 

오늘은 리액트에서 고유한 key값을 갖는것이 왜 중요한지, 어떻게 하면 고유한 key값을 가질수 있는지에 대해 공부했다.

정보를 관리할때, 배열의 형식으로 관리하는데 배열이기 때문에 이러한 정보들에도 [0],[1].. 과 같이 인덱스가 발생한다. 수많은 정보들중 하나를 수정하면 한칸씩 앞으로 끌려가는 상황이 생길 수 있어서 관리가 비효율적이다.

 

따라서 그런 방식이 아니라 각각의 값에 고유한 key나 id값을 부여하면 이러한 상황을 막고 효율적인 데이터의 관리가 가능하다.

key값을 고유하게 유지할 수 있는 방법은 여러가지가 있지만 가장 간편한 방법은 라이브러리를 사용하는 것이다. uuid라는 라이브러리가 있는데 install을 하고 import해서 필요한곳에서 쓰기만 하면 되기 때문에 엄청 편하다.

이러한 내용에 대해서 자세하게 블로그에 정리했다.

 

리액트 uuid 설치 (리액트 고유id, 고유key 사용이유)

요즘에 공부하는 내용들을 정리해서 계속 올리고 있다. 누군가가 적은 글을 복붙하는 것이 아니라 정말로 내가 이해한만큼만 나의 언어로 바꿔서 올리는거라서 더 좋다. 오늘은 완전히 이해했다고 하더라도 내 기억을 믿을수가 없는데 🥲 ㅋㅋ 이렇게 나의 언어로 기록해두면 나중에 다시 봐도 확실히 흡수하는 속도가 빠르다.

 

공부한 모든것을 다 기록할 수는 없겠지만 그래도 최대한 많이 적어보도록 노력하고자 한다. 정말로 코딩을 더 잘이해하고 싶고, 그런날이 온다면 나도 내 지식을 더 많이 전파할 수 있는 사람이 되고 싶다. 아좌좌 🔥🔥🔥

 

 

 

3.2.

 

법정스님 책에서 마음에 와닿았던 말.

 

리액트 공부를 하면서 props를 이해했다고 생각했는데, 이해가 부족했던 것 같아서 오늘은 props에 대해서 더 공부했다. props를 통해서 부모로부터 자식 컴포넌트로 값을 전달받는다. 이러한 값에 문자열이나 숫자가 아니라 함수를 전달받는 부분이 이해하기 어려워서 다시 더 공부했다.

 

코딩을 공부하는 것은 다른공부보다 같은 부분도 한번 이해하려면 시간이 걸리는것 같다. 그래서 그걸 이해하기 위해서 한번 본 코드도 다시 또보고 또보고 내가 어떤 부분을 몰라서 이해가 안되는것인지를 찾아서 완전히 알려고 노력하고 있다.

 

왜 언어라고 하는지 알것같은게, 우리가 쓰는 언어처럼 아는 부분은 읽히는데 모르는 부분은 ‘무슨말이지?🤔’ 마치 모르는 외국어 단어를 만났을때의 기분과 같다.

 

그래도 희망적인 부분은 같은것을 봐도 전보다 더 알아 들을 수있고 뭔가 시야가 넓혀지고 있는 기분이 든다. 같은 것을 보고 또 보는것이 발전이 없는 것처럼 느껴질수도 있지만 내 머리 안에서 받아들이는 것이 달라 지는 것을 내 스스로는 느낀다.

 

오늘 이론스터디 주제 중 하나가 클로저였다.

클로저에 대해서 처음 공부했을때가 기억난다.

이해하고 싶어서 정말로 하루종일 공부했는데도 이해가 안되어서 답답했는데, 반복하고 반복하다보니 오늘은 전과 다르게 어떤것인지 와닿는 것이 느껴졌다. 아마도 다음에는 클로저를 코드에서 발견할수도, 더 좋은 코드를 짜기위해 응용할수도 있을 것이다. 눈에는 보이지 않지만 반복할수록 늘고 있는 것이다.

 

하루하루 엄청나게 많은 양을 소화할수는 없지만 그래도 적어도 지금은 앞으로 나아가고 있다. 나는 녹슬지 않았다.

 

 

3.3- 3.5.

 

이번주말동안은 가족여행을 떠났다.

여수를 가기로 했는데 여수는 처음가는 도시라서 궁금했다..!!

그래도 공부는 해야할것같아서 가는 기차안에서 노트북을 꺼내서 프로그래머스 한문제 풂

어려운 문제는 아니었지만, 다른 사람풀이가 아니라 진짜 내가 생각해서 푼 문제라서 나름 뿌듯했다.

 

자바스크립트의 메서드중 하나인 join()이 문자열을 하나도 연결해준다는 것은 알았지만

()안에 어떤 값을 넣는지에 따라서 어떻게 다른 결과값이 나오는지 자세하게 알지 못했는데 문제를 풀면서 터득했다

 

,나 “” 과 같은 값이 들어가지 않고 abcdefg와 같이 하나의 문자열이 되게 만들려면, join(””)과 같이 괄호안에 “”값을 넣어줘야한다. 이것은 문제 풀때말고도 평상시에도 알면 개발할때 편할거같아서 따로 외워둬야겠다고 생각했다.

Array.join(””) ⇒ 하나의 문자열

 

또 공부했던것중 인상깊었던 것은 split()인데, split을 이용하면 문자열을 배열로 바꿀 수 있다.

그런데 특이한 것은 [a,b,c,d,e]와 같은 값이 있을때 split(c)를 한다면 마치 filter()사용하는 것과 유사한 효과를 낸다는 것이다. 그래서 split()하나만으로도 1️⃣ 배열을 문자열로 바꾸기 2️⃣ filter중 하나의 값 제거 와 같은 역할을 할 수 있다!!

 

프로그래머스 문제를 평일에는 최소 한문제라도 매일 풀려고 노력중인데, 그래도 뭔가 나름대로 실력이 늘어가고 자바스크립트에 내장된 함수들에 대한 이해도가 생기는것같아서 좋다. 앞으로도 꾸준히 풀어야겠다는 생각이 든다.

이제부터가 시작이고, 이대로 꾸준히만 한다면 나중에는 정말로 실력이 많이 늘지 않을까? 🙃

 

여수는 처음가는 곳이었는데 너무 좋았다 ㅎㅎ

요즘 날씨가 풀려서 더 그랬고, 오랜만에 가족들이랑 함께 시간을 많이 보낼수있어서 행복했다.

인생이 긴듯 짧은것 같다는 생각이든다. 개발일기에 적을 내용은 아니지만 ㅋㅋ

일기장이니까 이런 저런 생각을 적을때가 있는듯 😉

그래서 더 뭔가 소중한 사람들과 소중한 시간을 많이 보내고 싶고, 잘해주고 싶고 내 자신에게도 더 좋은 사람이 되고 싶다.

안가본 도시들도 앞으로 다 가봐야지..!!

 

이번주도 이렇게 끝이났다. 3주차를 마무리하면서 느낀점은 정말로 이렇게 기록을 하면서 공부하기를 잘했다는 것.

그리고 나름대로 체계가 잡혀가니, 마음의 불안함이 덜해지는 것 같다는 점이다.

아직도 많이 부족하지만, 어쨌든 앞으로 나아가고 있고 전보다 발전하고 있다는 생각이 든다.

이렇게 계속 꾸준히만한다면 한달뒤의 나는 어떨지 궁금해진다. 다음주도 화이팅!! 😘