포스코 X 코딩온 7기 9주차 ch2. React map, ref, lifecycle

9주차도 눈 감았다 뜨니 끝났다.

 

원래도 그랬지만 

요즘따라.. 더욱이

 

 

공부하기 싫다.

 

ㅋㅋ 어쩌지..

 

해야할게 너무 많아서

아무것도 안하는 중 ㅋ

 

하지만.. 오늘 나간 수업은

꼭 복습을 해야만 내일수업을 들을 수 있다 

 

그런의미에서 오늘 배운 내용

꾸역 꾸역 복습을 해본다..

 

 

 

map()

 

 일반 for 반복문

 

- map()의 인자로 넘겨지는 callback 함수를 실행한 결과를 가지고

새로운 배열을 만들 때 사용

 

- map()함수를 필요에 따라 

반복문처럼 사용할 수도 있음

 

문법

arr.map( callbackFunction, [thisArg] )

 

callbackFunction

: 새로운 배열의 요소를 생성하는 함수로,

currentValue, index, array 3개의 인수를 가질 수 있다.

 

[this.Arg]

: 생략 가능하고, callbackFunction에서 사용할 this객체

 

let list = ['a', 'b', 'c', 'd', 'e'];
let items = list.map((txt, id, arr)=>{
    console.log("tx: ", txt);
    console.log("tx: ", txt);
    console.log("tx: ", txt);
    return txt + id;
 })

 

- txt : list를 순서대로 돌면서 나오는 값

- id : 방금 나온 값(txt)의 인덱스

- arr : 현재 반복을 돌고 있는 배열

- items : "return txt + id;"로 만들어진 배열

 

Component에 map() 적용

function Repeat() {
  const list = ["a", "b", "c", "d", "e"];

  return (
    <>
      <div>
        {list.map((value) => {
          return <div>{value}</div>;
        })}
      </div>
    </>
  );
}

 

 

input 태그로 새로운 알파벳 추가하기

 

 const addAlpha = () => {
    //concat() 인자로 주어진 값을 기존 배열에 합치기
    const newAlpha = list.concat({ id: list.length + 1, alpha: inputAlpha });
    setList(newAlpha);
    setInputAlpha("");
  };
  
return (
    <>
      <input
        type="text"
        value={inputAlpha}
        onChange={(e) => setInputAlpha(e.target.value)}
      />
      <button onClick={addAlpha}>추가</button>
      <ol>
        {list.map((value) => {
          console.log(value);
          return (
            <li key={value.id}}>
              {value.alpha}
            </li>
          );
        })}
      </ol>
    </>
  );

 

❓ concat()

: 인자로 주어진 배열이나 값들을 

기존 배열에 합쳐서 새 배열을 반환한다.

 

: concat은 this나 인수로 넘겨진 배열의 내용을 바꾸지 않고,

대신 주어진 배열을 합친뒤 그 얕은 사본을 반환한다.

 

concat 예제>

//배열 두개 이어 붙이기
const alpha = ['a', 'b', 'c'];
const numeric = [1, 2, 3];

alpha.concat(numeric);
// 결과: ['a', 'b', 'c', 1, 2, 3]

//배열 세개 이어붙이기
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

num1.concat(num2, num3);
// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

filter() 함수

- filter()의 인자로 넘겨지는 callback함수의 

테스트(조건)를 통과하는 요소를 모아 새로운 배열을 생성

 

- filter()함수를 사용하여 배열에서 원하는 값을 삭제하는 코드 구현 가능

 

 

1. animal에서 길이가 3 이상인 animals을 return 하는 함수!

function Filter() {
  const animals = ["dog", "cat", "rabbit"];
  return (
    <>
      <div>
        {animals.filter((aaa) => {
          return aaa.length > 3;
        })}
      </div>
    </>
  );
}

 

 

 

2. 알파벳 더블 클릭 했을 때 알파벳 삭제하기

 

 const deleteAlpha = (id) => {
    //일치 하지 않는 것만 빼고 list에 담음
    const newAlpha = list.filter((value) => value.id !== id);
    setList(newAlpha);
    console.log(newAlpha);
  };
  
  ...
  
   return (
            <li key={value.id} onDoubleClick={() => deleteAlpha(value.id)}>
              {value.alpha}
            </li>
          );

 

ref

html에서 요소를 선택할 때

id를 지정한 후 요소를 후출한다.

 

<div id = "id1">내용</div>

 

같은 컴포넌트를 반복해서 사용하면 id 가 중복되는 문제가 발생한다.

 

이것을 해결하기 위해 ref를 사용!

 

ref는 컴포넌트 내부에서만 작동되기 때문이다!

 

ref란? reference

 

- 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용

 

- 동일한 컴포넌트를 반복해 사용해도 

각 컴포넌트 내부에서만 동작한다.

 

- dom 을 직접적으로 건드려야 할 때 사용한다.

 

- ref prop

: html요소의 레퍼런스를 ref prop에 저장

 

<element ref={myRef}></element>

 

 

Ref 사용하기 (함수형 컴포넌트)

 

useRef()

: 함수형 컴포넌트에서는 useRef()를 이용하여 Dom 요소에 직접 접근한다.

 

//1. ref 객체 만들기
const myRef = useRef();

//2. 선택하고 싶은 dom에 ref값으로 설정
<element ref={myRef}></element>

//3. useRef()로 만든 객체 안의 current 가 실제 요소를 가르킴
myRef.current;

 

문제1. 함수형 컴포넌트에서 버튼 클릭 시 input focusing

 

function RefSample() {
  //1. ref객체 만들기
  const inputRef = useRef();

  const handleFocus = () => {
    //3. useRef()로 만든 객체의 current 값으로 접근
    //focus(): 지정된 html요소에 포커스 설정
    inputRef.current.focus();
  };

  return (
    <>
      <p>함수형 컴포넌트에서 버튼 클릭 시 input focusing</p>
      {/* 2. 직접 접근해야 하는 dom 요소에 ref prop설정 */}
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>focus</button>
    </>
  );
}

 

2. ref를 사용하여 버튼 클릭시 1씩 증가

 

function RefSample2() {
  //1. useRef()를 사용하여 로컬 변수 만들기
  const idRef = useRef(1);

  const plusId = () => {
    idRef.current += 1;
    console.log(idRef.current);
  };

  return (
    <>
      <h1>{idRef.current}</h1>
      <button onClick={plusId}>plus ref</button>
    </>
  );
}

 

 

3번.

 

   const [inputWriter, setInputWriter] = useState("");
   const [inputTitlt, setInputTitle] = useState("");
   const writerInputElem = useRef();
   const titleInputElem = useRef();
  
  ...
  
  //input 빈 값 검사
  const checkInput = () => {
    //input에 값이 없으면 해당 input focusing
    if (inputWriter.trim().length === 0) {
      writerInputElem.current.focus();
      return false;
    }
    if (inputTitlt.trim().length === 0) {
      titleInputElem.current.focus();
      return false;
    }
    return true;
  };
  
  ...
  
  <input
          ref={writerInputElem}
          value={inputWriter}
          ...

 

- trim : 문자열을입력받거나 문자열을 합칠 경우 

쓸데 없는 공백이 따라들어가지 않도록 쓰는 함수

 

//trim함수 사용 예시
String str = " 문자열에 공백이 있습니다. ";		
System.out.println(str);

str = str.trim();
System.out.println(str);

 

Ref 사용하기 (클래스형 컴포넌트)

 

1. 콜백 함수

- 사용하고자 하는 DOM 요소에 ref라는 콜백 함수 작성 및 props로 전달

 

- ref 를 컴포넌트의 멤버 변수로 설정하는데,

 이때 ref는 원하는 대로 사용 가능

 

<input ref={(ref=> {this.input = ref} />

 

 

---

 

Life Cycle

- 라이프 사이클

 

- 수명 주기

 

- 모든 react component에 존재하는 것

 

 

- Mount

: dom 이 생성되고

웹 브라우저 상에 나타남

 

- Update

: props or state바뀌었을 때 업데이트 함

 

- UnMount

: 컴포넌트가 화면에서 사라질(제거될) 때

 

 

LifeCycle 함수형 컴포넌트

useEffect()

- 함수형 컴포넌트에서는 useEffect()를 사용해

Mount, Update, Unmount 시 특정 잡업을 처리함

 

//컴포넌트 Mount or Update될 때 동작
useEffect(() => {});

//컴포넌트 Mount될 때 동작
useEffect(() => {}, []);

//data 값이 Update 될 때 동작
const [data, setData] = useState();
useEffect(()=>{}, [data]);

  //text가 변경될때
  useEffect(() => {
    console.log("Text | Update");
  }, [text]);

//3 초 후 post보여주기
useEffect(() => {
    setTimeout(() => {
      getPost();
    }, 3000);
  }, []);

 

 

LifeCycle 클래스형 컴포넌트

 

마운트 될 때 호출되는 메서드

 

마운트 (Mount)

- constructor

- render

- getDerivedStateFromProps

- componentDidMount

 

업데이트(update)

: 업데이트 될 때 호출되는 메서드

- getDerrivedStateFromProps

- shouldComponentUpdate

- componentDidUpdate

 

언마운트(unmount)

- componentWillUnmount

 

 

-> 현재에는 클래스형 컴포넌트는 잘 사용하지 않음!

 

  changeNumber = () => {
    this.setState({ number: this.state.number + 1 });
  };
  changeVisible = () => {
    this.setState({ visible: !this.state.visible });
  };

 

 

.

.

.

 

이만!