컴포넌트 내부에서 let으로 변수를 설정 해 준다면, 다음 리랜더링 될 때 그 변수값은 초기화 된다. 계속 유지하고 싶은 값을 관리하려면 useState를 사용해야하는데, 상태를 바꾸면 component가 리랜더링 된다. 어떤 값을 바꾸었을때 굳이 리랜더링 할 필요 없는 그런 값을 관리하게 될 때도 있다. 이런 때에는 useRef를 사용.

컴포넌트가 리랜더링 될 때마다 기억할 수 있는 값을 관리할 때도 사용한다.

useRef로 관리하는 값은 바뀌어도 컴포넌트가 리랜더링 되지 않음.

어떠한 변수를 계속 기억하고 싶을 때. nextId.current를 바꾼다면 nextId값도 바뀌는 것이다.

값이 바뀐다고 해서 component가 리랜더링 되지는 않는다.

import React from 'react';

function UserList(){
    const users = [
        {
            id:1,
            username: 'velopert',
            email:'public.velopert@gmail.com'
        },
        {
            id:2,
            username: 'sample',
            email: 'tester@example.com'
        },
        {
            id:3,
            username: 'liz',
            email: 'liz@exameple.com'
        }
    ];


    return (
        <div>
            <div>
                <b>{users[0].username}</b>
                <span>{users[0].email}</span>
            </div>
            <div>
                <b>{users[1].username}</b>
                <span>{users[1].email}</span>
            </div>
            <div>
                <b>{users[2].username}</b>
                <span>{users[2].email}</span>
            </div>
        </div>
    );
}

export default UserList;

return 에서 같은 코드가 여러번 사용

하나의 파일에 여러개의 컴포넌트를 정의해도 됨.

import React from 'react';


function User({user}){
    return (
        <div>
            <b>{user.username}</b>
            <span>{user.email}</span>
        </div>
    );
}


function UserList(){
    const users = [
        {
            id:1,
            username: 'velopert',
            email:'public.velopert@gmail.com'
        },
        {
            id:2,
            username: 'sample',
            email: 'tester@example.com'
        },
        {
            id:3,
            username: 'liz',
            email: 'liz@exameple.com'
        }
    ];


    return (
        <div>
            <User user={users[0]}/>
            <User user={users[1]}/>
            <User user={users[2]}/>
        </div>
    );
}

export default UserList;

먼저 배열이 고정적이라면 이렇게 해 줘도 상관 없겠지만 만약 배열 내용이 바뀐다면?

자바스크립트 배열의 내장함수 map을 사용한다.

map()을 이용하여 객체 배열을 component element형태의 배열로 변환.

key 라는 props 고유값을 지정 해 주는것. (최적화 위하여.)

// 고유한 값을 key로 설정 해 주어야한다. 
    return (
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id}/>)
                )
            }
        </div>
    );

user.id 같은 고유한게 없을때는 기본적으로 key={index} 를 사용하게 되어있다.

(user, index) => (<User user={user} key = {index}/>) 이렇게.

index만 넣었을 때는 성능적으로 나아지지는 않음. key의 역할 :

array라는 배열이 있다. 이 배열을 div앨리먼드로 변환 해 주려고 할 떄.

중간에 z 를 넣어준다면, c가 z로 바뀌고 d가 c로 바뀌고.. 이런식. 비효율적.

각 배열의 원소가 정확히 어떤걸 렌더링 하고 있는지를 잘 모르기 때문.

key가 있어야

 import React from 'react';


function User({user}){
    return (
        <div>
            <b>{user.username}</b>
            <span>{user.email}</span>
        </div>
    );
}


function UserList(){
    const users = [
        {
            id:1,
            username: 'velopert',
            email:'public.velopert@gmail.com'
        },
        {
            id:2,
            username: 'sample',
            email: 'tester@example.com'
        },
        {
            id:3,
            username: 'liz',
            email: 'liz@exameple.com'
        }
    ];

// 고유한 값을 key로 설정 해 주어야한다. 
    return (
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id}/>)
                )
            }
        </div>
    );
}

export default UserList;

key가 있어야 어떤 데이터를 가리키는지 알 수 있다.

배열 렌더링 할 때는 key를 설정해야 효율적으로 렌더링 할 수 있다 .

고유값이 없을 때에는 key에 index를 넣을 수 있지만 비효율적이다. 데이터가 얼마 없고 자주 업데이트 되지 않을때에는 index사용한다고 큰 문제가 되지는 않는다. index를 key로 사용하면 매우 비효율적으로 업데이트가 된다.

class Component는 좀 나중에 다루겠다.

초기화 버튼 눌렀을 때 포커스를 이름에 두고 싶다면?

Dom에 직접 접근하는 방법 : useRef

const nameInput = useRef();

하면 nameInput이라는 객체가 만들어진다.

<input
                name="name" 
                placeholder="이름"
                onChange={onChange} 
                value={name}
                ref = {nameInput}
            />

선택하고 싶은 element에 ref = {nameInput} 해 준다. 이러면 이 Dom에 직접 접근 가능하다.

const onReset = ()=>{
        setInputs({
            name: '',
            nickname:'',
        });
        nameInput.current.focus();
    };

그런뒤 이렇게 해 주면 이름 쪽에 focus가 잡힘.

current라는 값이 들어있는데, current가 돔을 가리킨다. dom API중에 focus()라는게 있다.

useRef는 Dom선택 말고도 렌더링과 관련 없는 변수 관리 할 때도 사용 된다.

input 여러 개 일때 useState를 여러개 사용하는건 좋은 방법이 아님. 좋은 방법은, input에 name이라는 값을 설정하고, 이벤트가 발생했을 때 이값을 참조하는거다.

여러개의 문자열 형태를 가지고 있는 객체 형태를 관리 해 줘야한다.

function InputSample(){
    const [inputs, setInputs] = useState({
        name:'',
        nickname:'', 
    });
    const {name, nickname} = inputs;

    const onChange = (e)=>{
        console.log(e.target.name);
        console.log(e.target.value);
    }

    const onReset = ()=>{

    }
    return (
        <div>
            <input name="name" placeholder="이름" onChange={onChange}/>
            <input name="nickname" placeholder="닉네임" onChange={onChange}/>
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                이름 (닉네임)
            </div>
        </div>
    );
}

export default InputSample;

이 값들을 참조해서 객체를 업데이트 해 주면 되는건데,

리액트에서 객체를 업데이트 할 때

1. 기존의 객체를 복사 해야한다.

...inputs 이건 spread문법인데 이 문법은 객체 혹은 배열을 펼칠 수 있다.

https://learnjs.vlpt.us/useful/07-spread-and-rest.html?q=

import React , { useState } from 'react';

function InputSample(){
    const [inputs, setInputs] = useState({
        name:'',
        nickname:'', 
    });
    const {name, nickname} = inputs;

    const onChange = (e)=>{
        const {name, value} = e.target;

        const nextInputs = {
            //spread 문법. 현재 상태의 내용이 이 자리로 온다. 
            ...inputs,
            [name] : value,
        };
        //객체를 새로운 상태로 쓰겠다. 
        setInputs(nextInputs);
    };

    const onReset = ()=>{

    };

    return (
        <div>
            <input name="name" placeholder="이름" onChange={onChange}/>
            <input name="nickname" placeholder="닉네임" onChange={onChange}/>
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                이름 (닉네임)
            </div>
        </div>
    );
}

export default InputSample;

nextInputs 에 ...inputs을 사용해서 input한거 그대로 사용 하면서 name만 value로 덮어준다.

const nextInputs = {
            //spread 문법. 현재 상태의 내용이 이 자리로 온다. 
            ...inputs,
            name:value,
        };

이렇게 하면 문자열 name자체가 들어가지게 되는데

[name]:value,

해주면 name값에 따라 다른 key값이 변경됨.

정리

객체 상태를 업데이트 할 때는 꼭 기존의 상태를 한번 복사하고 나서 특정값을 덮어 씌우고 새로운 값을 설정 해주어야함. : 이걸 불변성을 지켜준다고 함. 이렇게 해야 업데이트 된 것을 감지하고 랜더링이 됨.

객체 상태를 업데이트 할 때는 spread문법으로 객체를 복사하고, 특정값을 덮어씌워서 상태를 업데이트 해 주어야한다.

이건 배열 상태를 관리 할 때에도 마찬가지이고 불변성을 지켜줘야지만 최적화도 되는 것이다.

import React , { useState } from 'react';

function InputSample(){
    const [text,setText] = useState('');
    const onChange = (e)=>{
        setText(e.target.value);
    }

    const onReset = ()=>{
        setText('');
    }
    return (
        <div>
            <input onChange={onChange} value={text}></input>
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                {text}
            </div>
        </div>
    );
}

export default InputSample;

onChange라는 함수 만들고 e.target하면 이벤트가 발생한 DOM이 들어옴.

해서 value에 text해 주는것이 중요하다. 안그러면 초기화가 되지 않는다 ㅠㅠ

리액트 16.8에서 hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 가능.

counter기능 구현하기 .

이벤트 발생하면 특정 함수 실행 되도록 설정하기

import React from 'react'

function Counter(){
    const onIncrease = ()=>{
        console.log('+1');
    }
    const onDecrease = ()=>{
        console.log('-1');
    }
    return(
        <div>
            <h1>0</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

이벤트 설정할 때 주의 할 점

여기에 함수를 넣어주는거지 onIncrease()이렇게 실행을 시켜주면 안됨. ()하면 렌더링 될 때 호출되기 때문임. 함수를 넣어주는거지 여기서 호출해주는게 아님.

Component에 동적인 상태 넣어주기.

import React, { useState } from 'react';

function Counter(){
    //useState라는 상태를 만들건데, 상태의 기본값은0으로 하겠다.
    //setNumber는 이 상태를 바꾸어주는 함수. 
    //배열 비구조 할당, 구조 분해 통해서 작성함. 
    //useState가 호출 될 때 배열 반환. 첫번째 원소를 number로 추출.

    const [number,setNumber] = useState(0);

    const onIncrease = ()=>{
        setNumber(number + 1)
    }
    const onDecrease = ()=>{
        setNumber(number - 1)
    }
    return(
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

요약

1. useState를 사용해서 바뀌는 값을 사용할 수 있고, 값의 기본값은 파라미터로 넘겨주면 된다. useState(0)이렇게. 이러면 0 이 기본값.
2. useState 는 배열을 반환하는데, 첫번째는 현재상태, 두번째는 이 상태를 바꾸는 함수. 이 함수에 새로운 상태를 넣어서 호출해주면 값이 바뀌는거다.

useState할 때는 함수형 업데이트

setNumber(다음 업데이트 하고싶은 값) 이렇게 했었는데, 이 값을 어떻게 할지에 대한 로직을 정의하는 함수를 넣어줄 수도 있음.

const onIncrease = ()=>{
        setNumber(prevNumber => prevNumber + 1)
    }

값을 어떻게 할것이다. 라는 로직이 있는 함수를 넣어줄 수도 있음. 이걸 업데이트 함수라고 함. 리엑트 컴포넌트를 최적화 할 때 이런 함수형 업데이트를 하는 것이 필요하다.

import React, { useState } from 'react';

function Counter(){
    //useState라는 상태를 만들건데, 상태의 기본값은0으로 하겠다.
    //setNumber는 이 상태를 바꾸어주는 함수. 
    //배열 비구조 할당, 구조 분해 통해서 작성함. 
    //useState가 호출 될 때 배열 반환. 첫번째 원소를 number로 추출.

    const [number,setNumber] = useState(0);

    const onIncrease = ()=>{
        setNumber(prevNumber => prevNumber + 1)
    }
    const onDecrease = ()=>{
        setNumber(prevNumber => prevNumber - 1)
    }
    return(
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

최적화와 관련이 있다.

정리

setNumber는 두가지 용도가 있는데, 그 다음 상태를 넣어줄 수도 있고 이 로직으로 업데이트 할거야. 하고 함수를 넣어줄 수도 있다.

특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는것.

Hello 컴포넌트 내부에서 조건부 랜더링.

 function Hello({color, name, isSpecial}){
    return (
        <div style={{
            color
        }}>
            {isSpecial ? <b>*</b> : null}
            안녕하세요 {name}
        </div>
    );  
}

삼항연산자 사용하여 true일때, false일때 다른 결과물 보여주기

function Hello({color, name, isSpecial}){
    return (
        <div style={{
            color
        }}>
            {isSpecial && <b>*</b>}
            안녕하세요 {name}
        </div>
    );  
}

&&사용하여 true일때만 별표 표시 나타나게도 해줄 수 있음.

function Hello({color, name, isSpecial}){
    return (
        <div style={{
            color
        }}>
            <b>{isSpecial ? '스페셜!':'낫스페셜'}</b>
            안녕하세요 {name}
        </div>
    );  
}

이렇게 true, false에 따라 값이 다를 때 말고는 &&연산자 사용하여 나타내는게 더 깔끔함

function App() {

  return (

    //Hello Component
    //props를 전달하는 과정 
    // 태그가 두개 이상이므로 fragment로 감싸주기.
    <Wrapper>
      {/* true는 js 값이므로 {}로 감싸준다. */}
      <Hello name="react" color="red" isSpecial/>
      <Hello  color="pink"/>
    </Wrapper>
  )
}

isSpecial = {true} 없이 그냥 isSpecial하면 true가 된다. boolean 사용할 때 참조하기

props = properties

컴포넌트 사용할 때 특정 값 전달 해 주고 싶을때 사용한다.

Hello Component에 name이라는 값을 전달 해 주고 싶다면?

props에는 우리가 넣어 준 값들이 객체 형태로 들어 가 있다.

App.js에서

function App() {

  return (
    //Hello Component
    <Hello name="react"/>
  )
}

Hello.js는 이렇고

function Hello(props){
    console.log(props);
    return <div>안녕하세요</div>;
}

// Hello 라는 component를 return 해 주겠다. 
// 

props에는 우리가 넣어 준 값들이 객체 형태로 들어 가 있기 때문에 name = "react" 가 console창에 나타난다.

js 의 변수를 사용 해 주고 싶으면 {} 괄호로 감싸주고 props.name 이렇게 해서 props 객체 안의 값 사용한다.

import React from 'react';


function Hello(props){
    console.log(props);
    return <div style={{
        color:props.color
    }}>안녕하세요{props.name}</div>;
}

// Hello 라는 component를 return 해 주겠다. 
// 
export default Hello;

props를 구조 분해 해서 color랑 name값을 미리 추출 해 줄 수 있다.

function Hello({color, name}){
    return <div style={{
        color:color
    }}>안녕하세요{name}</div>;
}

function Hello({color, name}){
    return <div style={{
        color
    }}>안녕하세요{name}</div>;
}

color:color 에서 :color 생략 가능

Default Props

• props설정하지 않았을때 기본적으로 설정하고 싶은값 어떻게 하면 좋을지

function Hello({color, name}){
    return <div style={{
        color
    }}>안녕하세요{name}</div>;
}


//props가 지정되지 않았을때 기본값을 설정 해주고 싶다면?
Hello.defaultProps = {
    name: '이름없음'
};

이게 바로 default props다.

Props Children

//이 방법으로도 불러 올 수 있고 
import Wrapper from './Wrapper'

//<Wrapper> 해 주면 자동으로 import 된다. 
<Wrapper>
      <Hello name="react" color="red"/>
      <Hello  color="pink"/>
</Wrapper>

Wrapper Component로 감싸 주니까 Wrapper 컴포넌트에 가려서 Hello들이 나오지 않는데 Wrapper안에 Hello를 표현 해주고 싶을때 사용하는게 Props Children이다.

Wrapper에게 있어서는 children이라는 props가 자식 Component를 받아 온 것이다. name, color가 props고 이 값을 파라미터를 이용하여 받아올 수 있고 기본값 설정하기 위해서는 defaultprops를 사용하면 된다..

태그와 태그 사이에 넣는 내용을 의미 하는게 children이다.

cd react-tutorial
cd begin-react
yarn start 

1. 주의할 점

• 태그는 꼭 닫혀 있어야한다.

  <input>이나 <br>같은거도 꼭 닫아줘야함. 

  <input /> 이렇게 하거나
  <br /> 이렇게 하거나
  <input></input>
  <br></br>이렇게 

• 두개이상의 태그는 무조건 하나의 태그로 감싸져 있어야한다.

빈 이름으로 감싸 준다. 컴퓨넌트를 보면 괄호()로 감싸 져 있는데 이건 부가적인거. 지금은 단순히 코드의 가독성을 위하여 사용되었다.

한줄 짜리는 괄호 없이도 작성 가능하다.

2. JSX내부에서 js값 사용하는 방법 const name = 'react';

이렇게 하면 그냥 name이 출력됨.

name 변수를 사용하고 싶으면 {} 괄호로 감싸주면 된다.

3. style과 classname 작성하는 방법 const style = { backgroundColor: 'black', color: 'aqua', fontSize: 24, padding: '1rem' };

style을 저렇게 작성하고,

<div style ={style}>{name}</div>

이렇게 해 주기 css를 적용 해 주고 싶다면

import React from 'react';
import Hello from './Hello'
import './App.css';

function App() {
  const name = '너무너무 힘들어요'
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24,
    padding: '1rem'
  };
  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  )
}

export default App;

App.css는 이렇게 되어있음

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

import './App.css' 해 주고 div에 className="gray-box" 해 주면 적용 된다.

4. 주석은 어떻게 적나?

{/**/로 감싸 주고} 괄호로 묶어주기.

태그 안에서의 주석은 //로도 가능

5. 정리

• 태그는 꼭 닫혀있어야한다.
• 
• 
• style 사용하고 싶으면 객체 형태로 넣어주어야 한다.
• 
• css class를 사용할 때도 className = "gray-box" 이렇게.

이 문제에서 기억 해 둘 것 세 가지를 기록하려 한다.

1. 파이썬에서는 미리 등록 된 알파벳 상수를 제공한다. (import string)
2. 리스트 연산 정리
3. join 함수와 map 함수 이용법

1. 파이썬에서는 미리 등록 된 알파벳 상수를 제공한다. (import string)

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 일단 알파벳 하나하나 alpa 배열에 다 넣었었다.. ㅋ import string string.ascii_lowercase 하면 소문자 전체 string을 불러올 수 있다. 이 string을 잘라서 alpa list에 넣었다.

출처&더 많은 정보 : https://programmers.co.kr/learn/courses/4008/lessons/12729

2. 리스트 연산 정리

직접 써 보기 전엔 내 것이 아니라는게 뼈저리게 느껴졌다. 이렇게 좋은 기능이 있는데 사용하자 ~

• del mylist[2] : 인덱스 2에 있는 요소를 삭제한다.
• "value" in mylist : "value"가 mylist에 있으면 True
• "value" not in mylist : "value"가 mylist에 없으면 True
• mylist.index("value") : "value"가 발견된 위치를 반환한다.
• mylist.remove("value") : "value"가 나타나는 위치 찾아서 삭제

🙋‍♀️ 이 문제를 "value" in mylist, mylist.index("value")를 사용해서 쉽게 해결 할 수 있었다.

3. join 함수와 map 함수 이용법

join과 map은 js에서도 있었으니 정리 해 두면 공부 할 때 훨씬 좋겠지.. join은 list를 string으로 합쳐주는 함수다. 백준 제출을 위해서 list에 담았던 숫자들을 한 줄로 출력하고 싶었는데 그러기 위해서 join을 찾아 봤었다.

'구분자'.join(리스트 이름)

join 은 구분자를 기준으로 구분 된 string을 생성 해 준다. 이렇게 사용하라고 했는데 int로 이루어진 list를 바로 join할 수 없었다. join은 string이 담긴 list만 바로 string으로 만들어 줄 수 있다. 그래서 map을 이용하여 일차적으로 int 요소를 str로 변환하고, join하여 한 줄로 합쳤다.

map(int, a)

s = ' '.join(map(str,array_string))

4. 해결 코드

import string
s = string.ascii_lowercase

alpa =[]
for i in s:
    alpa.append(i)

check_string = input()
array_string = []

for i in alpa:
    if i in check_string:
        array_string.append(check_string.index(i))
    else:
        array_string.append(-1)

print(" ".join(map(str, array_string)))

5. 문제 푼 후 느낀점

기초가 정말 중요하다.. 쉽다고 무시하지 말자.. 쉬운게 아니라 내 머리에 안들어온거다

git은 문제가 없다.. 내가 문제다

내 로컬 저장소에 master branch가 있고, jeongyeon-park브랜치가 있다. master branch에서 코드 작업을 하고

git push origin jeongyeon-park

하려고 했는데

🎁 오류 updates were rejected because a pushed branch tip is behind its remote hint: counterpart. check out this branch and integrate the remote changes hint: (e.g. 'git pull ...') before pushing again. hint: see the 'note about fast-forwards' in 'git push --help' for details.

🎀오류 pulling is not possible because you have unmerged files. hint: fix them up in the work tree, and then use 'git add/rm ' hint: as appropriate to mark resolution and make a commit. fatal: exiting because of an unresolved conflict

이런 오류가 났다. git 공부가 덜 된 상태에서 계속 push만 하려니 늘 할 때마다 다시 공부하고 또 다시 하고.. 무한 반복이라 글을 쓰게 되었다.

git checkout jeongyeon-park 

해서 브랜치 변경 한 후에는 git push 가 잘만 됐다. master 브랜치에서 push가 안되구나. 내가 remote할 때 어떻게 했더라 .. 하고 기록 안 해 둔걸 후회했다.

앞으로 무조건! git 쓸 때는 하나하나 다 기록 할거다..

아무튼 나는 master 브랜치에서 이미 작업을 해 버렸고, 나는 jeongyeon-park 원격 브랜치에 로컬 master 브랜치에서 작업 한 걸 올리고 싶은 상태고, 원격 jeongyeon-park에 올리려면, 로컬 jeongyeon-park에서 작업을 했었어야 한다. 그래서 master 브랜치의 변경 사항을 jeongyeon-park에 병합해 보려 한다.

https://backlog.com/git-tutorial/kr/stepup/stepup2_4.html

위 게시글을 참조 했다.

master 브랜치의 변경 사항을 jeongyeon-park에 병합하기

1. git checkout jeongyeon-park

병합 할 곳에 checkout

2. git merge master

했을 때 Auto-merging README.md CONFLICT (content): Merge conflict in README.md Automatic merge failed; fix conflicts and then commit the result. 라는 오류가 떴는데, README.md에 auto-merging 문제가 있다는 말 이라서 README.md가서 수정 해 줌. 고쳐 준 후 다시 git merge master

3. 병합 완료 ! commit까지 모두 merge되는 것 같음. push 성공!

（づ￣3￣）づ╭❤～

알게 된 점

• git merge branch_name 으로 branch를 병합할 수 있다.
• merging이 덜 됐을 때 conflict 난 부분 수정하고 add,commit, push 해 주면 master|MERGING이라고 떠 있는 부분 해결 된다.
• jeongyeon-park 브랜치에 push하고 싶을 떄 로컬 jeongyeon-park에서 작업하자.

느낀점

나는 여전히 깃이 무섭다.. 이것때문에 2시간정도를 삽질 했는데 2시간 삽질하고 branch 병합하는거 배운거면 나쁘지 않은듯! GIT이 무섭지 않을 때 까지 열공하기 !!