13. 배열에 항목 추가하기 · GitBook

[utterances-bot]

13. 배열에 항목 추가하기 · GitBook

https://react.vlpt.us/basic/13-array-insert.html

[vasci]

안녕하세요 패스트캠퍼스 프론트엔드 개발 올인원패키지를 듣고 있는 수강생입니다. 전체적인 코드 기능의 흐름을 봐보려고는 하는데 다시봐도 이해가 잘 안되서 혹시 흐름에 따라 코드를 한번 설명을 해주실 수 있으신가요? 감사합니다.

[dotdotgod]

useRef를 사용하지 않고 static변수를 사용하는 것이 어떤 이점이 있는지 인지가 안됩니다. 혹시 이와 관련해서 추가적인 설명을 해주실 수 있을까요?

[dotdotgod]

다시 생각해보니 setTimeout, setInterval 등을 관리할 때 컴포넌트와 같이 관리해서 코드상으로 직관적이고 효율적일 수 있겠단 생각이 드네요

[journy002]

안녕하세요. 코드를 공부하다가 질문이 생겨 글올립니다. return안에 안에는 왜 name={username}이라 적지않고 username={username}이라고 적은건가요??

CreateUser.js 컴포넌트에서 각각의 input의 name이 username, email이여서 그런건가요??

[jerome-geek]

네 맞아요! CreateuUser.js 에서 props로 username, email, onChange, onCreate 을 받고 있기 때문에 거기에 맞춰준 것입니다.

[jongjunpark]

안녕하세요. 궁금한점이 있어 여쭤봅니다. useState를 사용해서 state의 값을 변경하면 리렌더링이 되는 것으로 알고 있는데, 리렌더링은 return부분만 해당되는 것인가요?

const nextId = useRef(4);

이 부분이 리렌더링 되면 호출이 계속되어서 nextId가 4에서 머물것만 같을 거 같은데 return부분이 리렌더링 되면 다른 부분은 영향을 주지 않는가요??

[jongjunpark]

이전 글의 댓글에 설명이 있었는데 이 댓글을 작성한 후 발견했네요

[leesd88]

App.js - onCreate - setInputs 코드 중 [name]: value에서 name을 []에 넣는 이유가 뭔지 알수 있을까요... (초보입니다...)

[leesd88]

위 댓글 onCreate가 아니라 onChange입니다..

App.js - onChange - setInputs 코드 중 [name]: value에서 name을 []에 넣는 이유가 뭔지 알수 있을까요... (초보입니다...)

[sonak22]

[]의 의미는 key값으로 쓰겠다는 의미입니다. [name] 이 username과 email 두가지의 경우가 있는데, onChange라는 하나의 함수로 여러값을 저장하기 위해서 사용한것으로 보여집니다. [e.target.name] : e.target.value 이런식으로 state에 저장을하면 input마다 다른 함수를 사용하지 않고 여러개 input값을 저장할 수 있습니다. username:e.target.value, email: e.target.value 이렇게 dynamic하게 key값이 들어갑니다^^

[qkrdltkr4513]

App.js - onChange - setInputs 코드 중 [name]: value에서 name을 []에 넣는 이유가 뭔지 알수 있을까요... (초보입니다...)

const obj = { name : 'name' } === const obj[name] = 'name'

[jerome-geek]

@qkrdltkr4513 Object는 key, value의 쌍으로 이루어져 있는데 해당 키값으로 값을 조회하기 위한 부분입니다. obj['name']은 obj.name과 같습니다

[qkrdltkr4513]

@jerome-spin 멘션 기능이 있었군요

[wenodev]

배열에 항목 추가

spread 연산자 사용

• setUsers([...users, user]);

  concat 함수 사용

• setUsers(users.concat(user));

  1-13 구조에서 알아두면 좋은 점

• 부모 컴포넌트에서 state값(input 등등)과 함수를 작성하고 자식 컴포넌트에게 전달하는 구조를 기억하자

[jody96]

감사합니다!!!

[sshusshu]

불변성을 지키면서 배열에 새 항목을 추가하는 방법

1. spread 연산자를 사용 (...배열이름)
2. concat 함수를 사용 (배열이름.concat(합치고 싶은 배열))

[123rudgks]

강의 잘 보고 있습니다 감사합니다 ^^ 질문이 하나 있는데

const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };

이 부분에서 user객체 안에 id는 id: nextId.current로 속성 값을 명시해 줬는데 username과 email은 왜 username: username , email: email이 아닌가요?

[Kkan9ma]

@123rudgks 만약에 key 이름으로 선언된 값이 존재하다면, 바로 매칭시켜주는 문법입니다. (ES6 문법(object-shorthand))

위 내용은 벨로퍼트 님의 모던 자바스크립트 강의 링크에서 발췌하였으니 참고해보세요 :)

[isaacl312]

선생님들 궁금한게 있어요.

const nextId = useRef(4) 이거 각 클라이언트의 변수잖아요...

회원가입시- USER객체를 - 백앤드에 저장할텐데 - 자동으로 유일ID를 부여받으며.

(1)nextId는 무었때문에 쓰나요??
(2)그리고 Redux쓰는거랑은 무슨차이가 있는지요? 같은용도인가?..

[wjlee966]

위 코드에서 궁금한게 있어서 질문을 올려봅니다..!😊🙋‍♂️ (위 예제에서 새로운 객체 (id는 4번) 를 추가하는 상황입니다..)

const onCreate = () => {
  // 나중에 구현 할 배열에 항목 추가하는 로직
  const user = {
    id: nextId.current,
    username,
    email,
  };
  // setUsers([...users, user]);
  setUsers(users.concat(user));

  setInputs({
    username: '',
    email: '',
  });

  nextId.current += 1;

  // 이 부분이 궁금함니다요..😅😅
  console.log(users); // 4개의 user 객체가 나와야할 것 같고..🤔❓
  console.log(inputs); // inputs 는 빌 것 같은데...🤔❓❓
  console.log(nextId.current);
};

로그를 찍어보니 아래와 같네요..

Inline Babel script:85 
(3) [{…}, {…}, {…}]
0: {id: 1, username: 'velopert', email: 'public.velopert@gmail.com'}
1: {id: 2, username: 'tester', email: 'tester@example.com'}
2: {id: 3, username: 'liz', email: 'liz@example.com'}
length: 3
[[Prototype]]: Array(0)

Inline Babel script:86 
{username: 'wonjoonth', email: 'wonjoonth@example.com'}
email: "wonjoonth@example.com"
username: "wonjoonth"
[[Prototype]]: Object
Inline Babel script:87

5

위 코드에서

1. console.log(users); // 추가한 user 객체를 포함한 4개의 user 객체가 나와야할 것 같은데 왜 3개만 출력되는지?

2. console.log(inputs); // inputs 는 이전에 있는 setInputs({username: '', email: ''}); 코드에 따라 빌 것 같은데 왜 출력이 되는지?

궁금합니다.

고수님들의 답변 부탁드립니다..!

[jerome-geek]

@isaacl312

1. nextId는 배열의 unique한 id를 만들기 위해 쓰입니다. 여기서는 백엔드와 연동되어 있지 않으며, 브라우저 내 현재 창에서만 존재하는 상태값입니다.
2. Redux는 클라이언트의 상태값을 관리하기 위한 라이브러리 입니다. 예제에서 이루어진 모든 행위들은 클라이언트에서만 존재하며 백엔드와는 별개로 동작하는 부분입니다.

[jerome-geek]

@wjlee966 onCreate 함수 밖에서 변경된 state의 값을 찍어보면 정상적으로 변경된 값이 나오는 것으로 보아 클로저문제인듯 싶습니다. 정확한 원인은 아니고 추측이기 때문에 잘못된 내용이라면 다른 고수님들께서 답변해주실 것으로 생각됩니다. 저도 궁금하니 조금 더 공부해서 알려드릴께요! https://velog.io/@jinsoobyeon/%ED%81%B4%EB%A1%9C%EC%A0%80 이 글 참고하시면 도움이 될 듯 싶네요! 본문에 나온 내용을 참고하자면 '가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함시키지 않습니다.' 라는 문장이 있는데, 이를 해당 예제에 적용해보자면 콘솔을 찍음으로써 해당 변수는 가비지 컬렉터에 들어가지 않고 계속 살아있어 이전값을 계속 참조하고 있는 것으로 생각됩니다. 누군가 시원하게 설명해주실 분이 있으면 좋겠습니다

[DoK6n]

@wjlee966 리렌더링 되는 과정을 좀더 집중적으로 파보시면 좋을것같아요!

[DoK6n]

그냥 간단하게 useEffect 써서 찍은 콘솔로그

컴포넌트 두두둥장:  (3) [Object, Object, Object]
컴포넌트 두두둥장:  {username: "", email: ""}
컴포넌트 두두둥장:  4
onChange:  (3) [Object, Object, Object]
onChange:  {username: "123", email: "ㅂㅈㄷ"}
onChange:  5
컴포넌트 사라짐:  (3) [Object, Object, Object]
컴포넌트 사라짐:  {username: "", email: ""}
컴포넌트 사라짐:  5
컴포넌트 두두둥장:  (4) [Object, Object, Object, Object]
컴포넌트 두두둥장:  {username: "", email: ""}
컴포넌트 두두둥장:  5

onChange에서 콘솔을 찍으셔서 그런걸겁니다. 아직 리랜더링이 안되서 반영이 안된 시점에서 찍은거라 예상하신 값을 보고싶으시다면 컴포넌트가 리랜더링 되고 난 시점에 찍으시면 됩니다.

정말 자세하게 알려면 바닐라 자바스크립트로 작은 리액트 구현하신분들 있더라구요 그분들꺼 블로그를 보는게 더 좋을거같아요

[wjlee966]

@jerome-spin @DoK6n 답변해주셔서 감사합니다~👍👍

[josunyjostar]

개꿀띠 너무 쉽고 유익한 강의

[HiimKwak]

전달력이 영상보다 낮을 수 밖에 없는 텍스트 임에도 불구하고 어떻게 다른 영상 강좌보다도 쉽게 배울 수 있는지 모르겠네요. 너무나 좋은 글입니다.

[jsy1021]

useRef(4)대신 useRef(users.id+1)이렇게 써도 문제가 없는지 궁금합니다.

[bellosogno]

@jsy1021 / 안됩니다. (users가 배열이므로..) 의도하시는 바가 id 마지막 값이라면, useRef( users[users.length-1].id+1 ) 처럼은 쓸 수 있겠네요.