리액트 3주차

6-2 React에서 DOM조작하기 

handle submit 기능을 수정 

 

console.log(state) ---> 

if(state.author.length<1){
	alert ("작성자는 최소 1글자 이상 입력해 주세요");
return;
}
if(state.author.length<5){
	alert ("일기 본문은 최소 5글자 이상 입력해주세요");
return;
}

저장하기 버튼을 클릭했을 때 조건에 맞지 않으면 alert가 나오게 되는 것을 확인 할 수 있다.

 

하지만 트렌디한 웹사이트에서는 이러한 alert를 잘 사용하지 않는다. 

그래서  우리는 alert대신 focus를 주는 방법을 적용해 볼 것이다. 

 

 

use Ref를 사용

const authorInput =useRef();를 사용해서user input에 user Ref를 적용시킴

그러면 authorinput에는 React.MutableRefObject가 적용됨 

<input 
ref=(authorInput)
	name='author'
    type='text'
    value={state.author}
    onChange={handleChangeDiary}
/>

author input이라는 객체를 통해서 인풋에 접근할 수 있게 됨 

 

이제 아까 작성한 alert를 없애고  authorInput.current.focus();를 입력해주면된다. 

 

textarea도 이런식으로 적용해주면 된다. 

 

6-3 react에서 리스트 사용하기 

작성된 일기들은 array에 저장되고 list 형태로 렌더링 됨 

 

diaryList.js 생성

const DiaryList=()=>{
	return<div className='DiaryLsit">
    	<h2>일기 리스트</h2>
    </div>
}

export default DiaryList;

 

app.js 수정 

import ...

const dummyList=[
	id:
    author:
    content:
    emotion:
    create_date:
],

const App=()=>{
	return (
    	<div className='App'>
        	<diaryEditor/>
            <diaryList/>
        </div>
    );
};
export default App;

 

일기 데이터 사용하는 방법 

작성사 사용 

<div>작성자: {it.author}</div>를 추가해주면 됨 

일기는 

<div>일기:{it.content}</div>

이런식으로 배열의 요소를 리스트 형태로 나타나느 것을 확인 할 수 있음 

 

undefined으로 설정된 값을 디폴드 값으로 전달해 주는 방법 

DiaryList.defaultProps={

    diaryList:[ ],

};

 

error가 해결이 됨 

 

 

DiaryItem.js을 별도로  추가

const DiaryItem=()=>{
	return <div className="DiaryItem"></div>;
};

export default DiaryItem;

 

 

 

6-4 리스트 데이터 추가하기

 

컴포넌트&데이터 구조 생각해보기

                <diaryEditor/>

<app/>[

                <diaryList/>

 

리액트에서는 같은 레벨(list와 에디터같은 관계)끼리는 데이터를 주고 받는게 불가능함 

위에서 아래로만 가능함 

<app>--<dummy>--><diarylist>

하지만 다른 방법이 있음.

공통분모인 app이 state를 가지고 있고 list에 data를 주고 editor에 prop으로 상태변환함수인 setdata를 전달해 주면 된다. 

 

이런걸 참고해서 에디터에 추가되면 리스트에 표시되는 것을 확인해 볼 것임 

 

app에 [data,setdata]를 만들어줌 

function App(){
	const [data,setData]=useState([]);
    
    const dateID=useRef(0)
    
    
    const onCreate=(author,content,emotion)=>{
    	const created_date=new Date().getTime();
        const newItem ={
        	author,
            content,
            emotion,
            create_date,
       		id:dataId.current
        };
        dataId.current+=3;
        setDate([...data,newItem]);
    };
return (
	<div className="App">
    ....
    
    .....

const handleSubmit = () => {
        if (state.author.length < 1) {
            authorInput.current.focus();
            return;
        }
        if (state.content.length < 5) {
            contentInput.current.focus();
            return;
        }
        onCreate(state.author, state.content, state.emotion);
        alert("저장 성공");
        setState({
            author: "",
            content: "",
            emotion: 1,
        });
    };

6-5리스트 데이터 삭제하기 

데이터 삭제 함수 ! 

const onDelete(targetId) =>{
        console.log(`${targetId}가 삭제되었습니다`);
        const newDiaryList = data.filter((item) => item.id !== targetId);
        console.log(newDiaryList);
        setData(newDiaryList);
    }
return (
        <div className="App">
            <DiaryEditor onCreate={onCreate}></DiaryEditor>
            <DiaryList onDelete={onDelete} diaryList={data}></DiaryList>
        </div>
    );

6-6 리스트 데이터 수정하기 

const onEdit(targetId, newContent) =>{
        setData(
            data.map((item) =>
                item.id === targetId ? { ...item, content: newContent } : item
            )
        );
    }
    return (
        <div className="App">
            <DiaryEditor onCreate={onCreate}></DiaryEditor>
            <DiaryList
                onDelete={onRemove}
                diaryList={data}
                onEdit={onEdit}
            ></DiaryList>
        </div>
    );
}