[September,5,2022]

2022-09-05 (비? 태풍? )

✍️ PLAN & TODO

• 프론트 auth 연결 부분 재적용
• 몽고db
• 리팩터링
• review(useContext)
• ModalContext 만들기 복습
• useReducer 실습
• 차장님 대리님 코드보며 공부하깅

💻 1) CODING

09:00-17:00 / 17:00-19:00 / 21:00~22:00 / 23:00-24:00

✍️ WORK & CODE

1) 재밌는 Reat Hooks~ useContext 실습

https://www.youtube.com/watch?v=LwvXVEHS638

import Page from './Page';
import { useState } from 'react';
import { ThemeContext } from './context/ThemeContext';
import { UserContext } from './context/UserContext';

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <UserContext.Provider value={'사용자'}>
      <ThemeContext.Provider value={{ isDark, setIsDark }}>
        <Page />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

export default App;

2) forwardRef 실습

function App() {
  const inputRef = useRef();

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={focus}>클릭</button>
    </div>
  );
}

export default App;


import { forwardRef } from 'react';

function MyInput(props, ref) {
  return (
    <>
      <input ref={ref}></input>
    </>
  );
}

export default forwardRef(MyInput);

3)useReducer 실습

const ACTION_TYPES = {
  deposit: 'deposit',
  withdraw: 'withdraw',
};

const reducer = (state, action) => {
  switch (action.type) {
    case ACTION_TYPES.deposit:
      return state + action.payload;
    case ACTION_TYPES.withdraw:
      return state - action.payload;
    default:
      return state;
  }
};

function App() {
  const [number, setNumber] = useState(0);
  const [money, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <h2>useReducer 은행에 오신 것을 환영합니다</h2>
      <p>잔고: {money}원</p>
      <input
        type='number'
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
        step='1000'
      ></input>
      <button
        onClick={() =>
          dispatch({ type: ACTION_TYPES.deposit, payload: number })
        }
      >
        예금
      </button>
      <button
        onClick={() =>
          dispatch({ type: ACTION_TYPES.withdraw, payload: number })
        }
      >
        출금
      </button>
    </div>
  );
}

export default App;

const initialState = {
  count: 0,
  students: [{ id: Date.now(), name: 'James', isHere: false }],
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'add-student':
      const name = action.payload.name;
      const newStudent = {
        id: Date.now(),
        name,
        isHere: false,
      };
      return {
        count: state.count + 1,
        students: [...state.students, newStudent],
      };

    case 'delete-student':
      return {
        count: state.count - 1,
        students: state.students.filter(
          (student) => student.id !== action.payload.id
        ),
      };
    case 'mark-student':
      return {
        count: state.count,
        students: state.students.map((student) => {
          if (student.id === action.payload.id) {
            return { ...student, isHere: !student.isHere };
          }
          return student;
        }),
      };

    default:
      return state;
  }
};

function App() {
  const [name, setName] = useState('');

  const [studentsInfo, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>출석부</h1>
      <p>총 학생 수 : {studentsInfo.count}</p>
      <input
        type='text'
        placeholder='이름을 입력해주세요'
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button
        onClick={() => dispatch({ type: 'add-student', payload: { name } })}
      >
        추가
      </button>

      {studentsInfo.students.map((student) => {
        return (
          <Student
            key={student.id}
            name={student.name}
            id={student.id}
            isHere={student.isHere}
            dispatch={dispatch}
          />
        );
      })}
    </div>
  );
}

const Student = ({ name, id, isHere, dispatch }) => {
  return (
    <div>
      <span
        style={{ textDecoration: isHere ? 'line-through' : 'none' }}
        onClick={() => dispatch({ type: 'mark-student', payload: { id } })}
      >
        {name}
      </span>
      <button
        onClick={() => dispatch({ type: 'delete-student', payload: { id } })}
      >
        삭제
      </button>
    </div>
  );
};

export default App;

🤸‍♀️ 3) EXERCISE & LANGUAGES

Monday/ Wednesday(Tuesday)/ Thursday 19:45-20:15 (English with Clarisse)
Tuesday / Thursday 21:00 ~ 22:00 (수영 보류)
Saturday 09:00~10:00 (이번주 추석 gym x)
Sunday

It's the transition from summber to autumn.
It's not easy for ~ to enter ~.
I am in awe to confab with you.
to have a sight of others' perspectives
freely express your thoughts
Have an amazing night ahead!
I like a schedule without break time
I gained ~ since ~
short-tempered
Do you like any
rhinoplasty
we lost track of time
unfailingly
you will carry that passion
you move forward
keep your head high

🏈 4) REFLECTION

• 모임 연락 기다리기 아니면 혼자~