[to-do-app] React Header 만들기

https://yeomss.tistory.com/201

[to-do-app] React 환경설정 + Redux

이전 글은 위에 링크로 달아놓겠습니다. 이번에는 Header 를 만들어보겠습니다.

Header에서 user의 닉네임을 state 에서 가져오고 변경도 가능하도록 만들 것입니다.

 

 

 

 HeaderView 

import React from "react";
import "../styles/header.css";
import Title from "../components/header/Title";

const HeaderVIew = () => {
	return (
		<div>
			<Title />
		</div>
	);
};

export default HeaderVIew;

헤더 뷰입니다. 타이틀만 덩그러이 있네요.

해당 타이틀에 이와 같은 텍스트가 들어갈 예정입니다.

 

 

 state 가져오기 

<span onClick={onClickNickname}>{nickname}님의 To Do List✨</span>

우선 span 코드를 선언합니다.

여기서 사용하는 nickname 은 사용자의 닉네임 데이터가 들어갈 예정입니다.

해당 닉네임을 클릭하면 닉네임을 변경할 수 있는 input 창이 뜨도록 onClickNickname 함수를 만들어 줍니다.

 

const nickname = useSelector((state) => state.user.data.nickname);

store 에서 데이터는 useSelector 를 이용하여 가져올 수 있습니다.

 

 

 state 변경 

const [isEdit, setIsEdit] = useState(false);

const onClickNickname = useCallback(() => {
		setIsEdit(!isEdit);
}, [isEdit]);

useState로 isEdit 이라는 state 를 선언해줍니다.

해당 state는 setIsEdit 이라는 함수를 통해서만 값을 변경할 수 있습니다.

isEdit 을 true/false 로 토글할 수 있도록 함수를 만들어주고 닉네임을 클릭하면 실행되도록 설정합니다.

{isEdit ? (
    <form>
        <input vlaue={nickname_} onChange={onChangeNickname_}></input>
        <button onClick={editNickname}>확인</button>
    </form>
) : null}

만약 isEdit 이 true 면 <form> 태그가 활성화가 되고 그렇지 않으면 null 이 활성화가 됩니다.

따라서 닉네임을 변경할 수 있는 input 창이 뜨고, 뜨지 않고를 조종할 수 있게 되었습니다.

 

 

 input value 변경하기 

const [nickname_, setNickname_] = useState(nickname);

const onChangeNickname_ = useCallback((e) => {
    setNickname_(e.target.value);
}, []);

input을 입력하면 value 값이 자동으로 저장이 되도록 onChange 이벤트와 함께 함수를 생성해줍니다.

e.target.value 안에 input 의 value 값이 들어가 있습니다.

 

 

 action 실행시키기 

// reducer/user.js

const userSlice = createSlice({
	name: "user",
	initialState,
	reducers: {
		editNickname(state, action) {
			state.data.nickname = action.payload;
		},
	},
});

// Title.js

const editNickname = useCallback(
    (e) => {
        e.preventDefault();
        dispatch(userSlice.actions.editNickname(nickname_));
        setIsEdit(!isEdit);
    },
    [dispatch, nickname_, isEdit]
);

dispatch 를 이용하여 user 리듀서에 있는 action을 실행시킵니다.

그리고 나서 input 폼 창이 닫히도록 isEdit 을 false 로 설정합니다. e.preventDefault() 는 프론트상 새로고침이 되지 않도록 하는 이벤트 함수입니다.

 

 

 전체 코드 

import { React, useCallback, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import userSlice from "../../reducers/user";

const Title = () => {
	const dispatch = useDispatch();
	const nickname = useSelector((state) => state.user.data.nickname);

	const [isEdit, setIsEdit] = useState(false);
	const [nickname_, setNickname_] = useState(nickname);

	const onClickNickname = useCallback(() => {
		setIsEdit(!isEdit);
	}, [isEdit]);
	const onChangeNickname_ = useCallback((e) => {
		setNickname_(e.target.value);
	}, []);
	const editNickname = useCallback(
		(e) => {
			e.preventDefault();
			dispatch(userSlice.actions.editNickname(nickname_));
			setIsEdit(!isEdit);
		},
		[dispatch, nickname_, isEdit]
	);

	return (
		<h1>
			<span onClick={onClickNickname}>{nickname}님의 To Do List✨</span>
			{isEdit ? (
				<form>
					<input vlaue={nickname_} onChange={onChangeNickname_}></input>
					<button onClick={editNickname}>확인</button>
				</form>
			) : null}
		</h1>
	);
};

export default Title;

 

 

 결과 화면 

 

 

 

 

 

 

 

 

 

 

 

#React redux #React state 변경 #react state 가져오기 #리액트 userSlice #react store #react onChange #react input 변경

---

다음 글

https://yeomss.tistory.com/205

[to-do-app] React 할 일 완료 & 삭제 기능