[2023 React.js 스터디] 사민주 #1주차 - 1장 1~9절 <과제>

1. nvm을 사용하여 node의 latest 버전을 다운받아 설정하세요.
   • 윈도우 기반으로 nvm-setup.exe 파일을 다운받은 후 cmd를 '관리자 모드'로 접속하여 node js의 최신 버전을 설치한다.
   • 'nvm use [버전]' 명령어를 통해 사용 버전을 지정해 준 후 'node -v' 로 확인
   • 윈도우의 경우,  Node.js 공식 홈페이지의 LTS 버전을 직접 다운로드 받으면 환경 변수 때문에 nvm 설치 오류가 발생하는 경우가 있다. 그럴 때에는 설치되어 있는 node js를 다 지워주고 nvm을 먼저 설치한 후 cmd에서 node js를 설치해 주어야 한다.
    

node -v로 확인

2. yarn 을 설치하세요.

•  Install Yarn 페이지를 참고해서 'npm install --global yarn' 명령어를 통해 설치한 후 'yarn -v'로 확인
•  

yarn -v로 확인

3. yarn create react-app king-god-wink 명령어를 통해 프로젝트를 만들어보세요

• git bash를 사용하여 'npx create-react-app king-god-wink' 를 통해 king-god-wink라는 디렉터리 생성
• cd 명령어로 king-god-wink 디렉터리로 이동한 후 'yarn start' 명렁어를 통해 "http://localhost:3000/"에 접속
• 돌아가는 리액트 로고 확인

yarn start

4. 코드 내부에 주석으로 되어있는 문제를 해결하세요. 

1.  아래에 content 라는 state를 useState 함수를 사용하여 선언하시오.

  // 아래에 content 라는 state를 useState 함수를 사용하여 선언하시오.
  // const ...
  const [content, setContent] = useState('내용을 입력하세요');
  const {bold, italic, color} = textStyle;

• content: 원소의 현재 상태 값 / setContent: 상태를 결정하는 Setter 함수
• useState 함수를 사용하여 content 라는 state를 선언, 이때 아무것도 입력하지 않았을 때 상태의 기본값을 "내용을 입력하세요"로 설정
• const {bold, italic, color} = textStyle; : 비 구조화 할당을 통해 값 추출

2. 아래 힌트를 참고하여 체크박스가 변할 때 마다 textStyle state 값이 변하도록 하시오.

  const handleCheckbox = e => {
    // 이 함수는 checkbox가 변하면 이벤트를 받아 처리해주는 함수이다.
    // 아래 힌트를 참고하여 체크박스가 변할 때 마다 textStyle state 값이 변하도록 하시오.
    // 브라우저에서 개발자 도구 - Console 에서 값을 확인할 수 있다.
    const {name, checked} = e.target; 
    
    setTextStyle({
      ...textStyle,
      [name]: checked
    });
    
    console.log(e.target.name, e.target.checked);
  };

• handleCheckbox : 이벤트로부터 받아온 값을 textStyle 객체에 넣어줌 
• const {name, checked} = e.target; -> e.target에서 name과 checked 를 추출
• 'setTextStyle'이라는  새로운 객체를 만듦
  • ...textStyle -> 기존의 textStyle 객체를 전개 구문으로 펼친 후 /복사
  • [name]: checked -> name 키를 가진 값을 checked로 설정
  • *객체 수정 시에는 직접 수정하면 안되고 새로운 객체를 만들어서 그 객체를 변화하는 식으로 사용해야 함(불변성 보존)
• console.log를 통해 체크박스가 변할 때 마다 콘솔에 name과 checked(boolean)값이 표시됨

3. 아래 함수를 작성하여 input의 값이 변할 때, content state의 값이 변하도록 하시오.

  // 아래 함수를 작성하여 input의 값이 변할 때, content state 값이 변하도록 하시오.
  const handleInputText = e => {
    setContent(e.target.value);
  };
   return (
    <div style={{ padding: '20px' }}>
      <input type="text" value={content} onChange={handleInputText} placeholder="내용을 입력하세요." /> <br />

• handleInputText에서 e라는 이벤트 객체를 파라미터로 받아옴
• e.target.value를 통해 input의 입력값을 받음
• onChange로 만들어 두었던 handleInputText 함수를 연결
• 상태가 바뀌었을 때 input 값의 내용을 업데이트 하기 위해 input 태그의 value 값을 content로 설정

4. 위에서 선언한 textStyle state 값을 props로 넘겨주도록 한 후 content state에 값이 없다면, "내용을 입력하세요."를 출력하고 값이 있다면 content state 값을 출력하시오.

      {/* 아래 StyledH2 Component는 각각 bold, italic, color을 props로 받아 적용시킨다. */}
      {/* 위에서 선언한 textStyle state 값을 props로 넘겨주도록 한다. */}
      <StyledH2 bold={bold} italic={italic} color={color}>
        {
          // content state에 값이 없다면, '내용을 입력하세요.' 를 출력하고 값이 있다면 content state 값을 출력하시오.
          content
        }
      

      </StyledH2>

• 위에서 선언한 textStyle state 객체에 저장된 boolean 값을 props로 넘겨받아옴 (조건문은 index.js에 이미 들어있음)
• {content}를 통해 입력된 값을 출력

5. 최종 결과!!!

아무것도 입력되지 않았을 때

입력 후 bold와 italic만 체크

6. 개인 브랜치에 commit & push

 

기억할 것!!! -> 리액트에서 객체를 업데이트 할 시, 기존 객체 직접 수정 XXX, 새로운 객체를 만들어서 변화줘야 함!!!