instagram 클론코딩 : westagram 총정리👩🏻‍💻

 

instagram을 클론코딩하여 간단한 login페이지와 main페이지가 있는 westagram을 만들었다.

까먹을까봐 정리해두려고 한다!

1. vsc 구성

- .vscode에는 settings.json

- public에는 mock data폴더, images폴더, index.html

- src에는 components폴더, pages폴더, styles폴더, index.js, Router.js

- index.js인데 Router를 index.html에 있는 root로 렌더하고 있다. 이렇게하면 SPA가 가능하다.

index.js

- Router.js이다.

다른 경로(url 주소)에 따라 다른 View(화면)를 보여주기위한 Router!

일단 react-router-dom을 다운받아야한다.

npm install react-router-dom --save 

Router라이브러리를 활용하기 위해서는 BrowserRouter, Routes, Route를 import해야한다.

나의 login, main page도 연결해주자.

Router 컴포넌트는 이렇게 구현하자.

2. login 페이지

유효성 검사를 통과하면 로그인버튼이 활성화되면서 useNavigate로 main-jeongeun페이지로 갈 수 있게 하기

- useNavigate import하기

import { useNavigate } from 'react-router-dom';

- useNavigate를 활용하기 위한 함수만들기

const navigate = useNavigate();

const goToMain = e => {
  navigate('/main-jeongeun');
}

- button태그 : 유효성 검사를 통화하면 disabled가 false가 되면서 버튼이 활성화되고 클릭시 main페이지로 이동할 수 있다.

<button
    onClick={goToMain}
    className={isButtonActive ? 'activated' : 'deactivated'}
    type="button"
    disabled={!isButtonActive} //true일 때 재역할을 함, isTrue가 true면 disabled는 false가 되어 main에 들어갈 수 있음.
>
 로그인
</button>

- 유효성검사

(1) id입력하는 input태그, pw입력하는 input태그에 각각 name속성 부여하기

<input
    onChange={writeUserData}
    className="id"
    name="id"  //name 값으로 id 부여!
    type="text"
    placeholder="전화번호, 사용자 이름 또는 이메일"
/>

<input
    onChange={writeUserData}
    className="password"
    name="pw" //name값으로 pw 부여!
    type="password"
    placeholder="비밀번호"
/>

(2) name을 이용하여 유효성 검사하기

const [userData, setUserData] = useState({
    id: '',
    pw: '',
 });

const writeUserData = e => {
    const { name, value } = e.target; 
    setUserData({ ...userData, [name]: value }); 
};

const { id, pw } = userData;
const isButtonActive = id.includes('@') && pw.length >= 5;

userData 초기값으로 id, pw 둘 다 빈 문자열 설정했고

wirteUserData함수에서 입력하는 값으로 계속 업데이트 해주고 있다.

그것을 이용하여 isButtonActive로 유효성 검사를 했다.

<button
    onClick={goToMain}
    className={isButtonActive ? 'activated' : 'deactivated'}
    type="button"
    disabled={!isButtonActive} //true일 때 재역할을 함, isTrue가 true면 disabled는 false가 되어 main에 들어갈 수 있음.
 >

className 속성을 이용하여 scss를 각각 설정해 두었고

isButtonActiver가 true면 버튼색을 활성화된 진한 파란색으로

false면 비활성화된 연한 파란색으로 버튼의 배경색이 정해진다.

 

3. main 페이지

정리할 게 너무 많은데...

 

feed, feed의 각 comment(댓글), story, recommendatin으로 많이 겹치는 것들은 컴포넌트화 해주었다.

각각 mock data를 만들어서 map도 돌려주었다.

 

그리고 구현되어서 신났던 기능 세가지 정리해두어야겠다!

(1) 댓글 추가 기능

(2) 댓글 좋아요 기능

(3) 댓글 삭제 기능

 

(1) 댓글 추가 기능

const [value, setValue] = useState('');
const [comment, setComment] = useState([]);

const getInputValue = e => {
setValue(e.target.value);
};

const addComment = e => {
    e.preventDefault();
    const copyComment = [...comment];
    if (value.length < 1) {
      alert('댓글을 입력해주세요');
    } else {
      copyComment.push(value);
      setComment(copyComment); //copyComment로 comment 계속 업데이트 해주기.
      setValue('');
    }
};

(2) 댓글 좋아요 기능

const [isRedHearted, setIsRedHearted] = useState(false);

const changeHeart = () => {
	setIsRedHearted(!isRedHearted);
};

<i
    onClick={changeHeart}
    className={
    isRedHearted
      ? 'smallheart fa-solid fa-heart'
      : 'smallheart fa-regular fa-heart'
    }
/>

 

(3) 댓글 삭제 기능

 deleteComment={() => {
  let copyComment = [...comment];
  copyComment.splice(i, 1);
  setComment(copyComment);
}}