React 기본 - 간단한 일기장 프로젝트 1

 

프로젝트 생성

 

1. 바탕화면에 diary 폴더 생성

 

 

2. vscode에서 diary 폴더 열기

 

 

3. 터미널창 열어서 npx create-react-app 프로젝트 이름으로 프로젝트 생성

 

 

4.  diary 폴더가 두개 생겼기 때문에 안에 있는 diary 폴더를 밖으로 빼준다.

 

 

결과

 

5. 안쓰는 파일 삭제 및 삭제 된 파일과 관련된 import들 삭제 

 

 

표시된 것들 삭제하고 필요없는 import들도 삭제

 

---

 

프로젝트 시작

 

● 목표

 

 

1. DiaryEditor.js 컴포넌트 생성

 

 

2. DiaryEditor 컴포넌트를 화면에 랜더시키기 위해서 App.js에 DiaryEditor를 자식요소로 배치시켜준다.

 

 

 

● 작성자 input 만들기

 

결과

코드

- 작성자는 상태로 관리한다.

- onChange 함수는 input 태그에 글자가 입력될 때마다 실행되며 e라는 매개변수를 넘겨주는데 이때 e.target.value가 입력된 값이다.

- setAuthor(e.targer.value)로 입력될 때마다 상태를 업데이트 시킨다. 

 

 

● 내용 input 만들기

 

결과

코드

- 방법은 작성자 input 만든 것처럼 하면 된다.

- input태그 대신 textarea를 쓴다는 것만 다르다. 

 

 

● author와 content  state를 같이 관리하기

 

- 상태를 객체로 같이 관리한다.

 

- input태그의 value는 state.author이다

- setState는 새로운 객체를 만들어서 전달한다

- author은 새로 입력된 값으로 바뀌어야하기 때문에 e.target.value로

- content의 내용은 바뀌면 안되기 때문에 원래 값인 state.content로 만들어서 전달

 

- 위 내용과 같다.

 

 

But...

이런 방식을 이용하면 관리해야 될 state가 많아질수록 쓸데없이 코드가 길어지게 된다.

왜냐면 하나의 state를 바꾸려면 setState({~~~~~~~~}) 이런식으로 나머지 state들도 다 전달해야하기 때문이다.

 

이럴때는 스프레드 연산자를 이용해서 코드를 줄일 수 있다. 

 

- 이런 방식으로 사용하면 된다.

- 순서가 중요하다

- 반드시 원래 있던 state를 펼쳐주고 나서 변경하고자 하는 state의 값을 전달해야한다. 

 

 

● 중복되는 onChange 합치기

 

- handleChangeState 함수를 만든다.

- 이벤트 객체 e를 받아서 [e.target.name] : e.target.value로 바뀐 값에 해당하는 state를 변경한다. 

 

- input 태그와 textarea 태그에 각각 이름을 만든다.

- onChange에 이벤트 핸들러 함수인 hanldeChangeState를 부른다. 

 

 

● 감정점수 표현 만들기

 

 

결과

 

- emotion이라는 state 생성

- 초기값은 1

 

- 위에서  한 방식과 같다.

- name을 state의 이름과 똑같이 emotion이라고 한다.

- value는 state의 emotion 값이다.

- 이벤트가 발생하면 handleChangeState 함수를 호출한다.

 

 

다시 정리하자면,,,

 

- select 태그에서 이벤트가 발생하면 즉 option이 바뀌면 handleChangeState 함수가 호출된다.

① handleChangeState 함수 호출

     ●  e.target.name은 emotion

     ● e.target.value은 바뀐 값이다

따라서

② emotion state가 바뀐 값으로 변경된다.

③ select 태그의 value값이 바뀐 값으로 다시 업데이트 된다.

 

 

● 저장 버튼 만들기

 

- 버튼을 만든다. 

- 버튼 클릭하면 handleSubmit 함수 호출

 

- 콘솔에 state 출력하고

- 성공 알림창 띄우기

 

결과

 

●  디자인

 

결과

App.css

코드

 

 

 

 

다음은 유효성 검사를 할 예정

끝!!