겨리의 개발일기

유투브 소플님의 강의를 보고 미니블로그 만들기를 진행한 내용을 정리해봤다. 구현할 기능 ✅ 글 목록 보기 ✅ 글 보기 ✅ 댓글 보기 ✅ 글 작성하기(일단 화면만 개발) ✅ 댓글 작성하기(일단 화면만 개발) 프로젝트 생성하기 ✅ npx create-react-app 명령어 사용 패키지 설치하기 ✅ react-router-dom v6와 styled-components v5를 사용할 예정 npm install --save react-router-dom styled-components --save : 지금 설치하는 패키지들을 package.json파일이 관리하는 의존성 목록에 저장하겠다는 의미이다. 설치 후 package.json 확인 설치가 완료되면 package.json의 dependencies 쪽에서 확인..

Programming/React 2023. 6. 5. 16:48

input을 여러 개 만들어서 관리하는 방법 useState를 여러 번 사용하고 onChange 함수도 여러 개 만들어서 구현할 수 있다. 하지만 이는 좋은 방법이 아니다. ✅ input 태그에 name을 설정하고 이벤트가 input 태그에 name을 설정하고 이벤트가 발생했을 때 name의 값을 참조하면 더 간단하게 구현할 수 있다. ✅ 단, useState에서는 문자열이 아니라 객체형태의 상태를 관리해줘야한다. 리액트에서 객체를 수정하는 방법 inputs[name] = value; ✅ 위의 코드처럼 값을 직접 수정하면 안 된다. ✅ 기존 값을 직접 수정하게 되면 값을 바꿔도 리렌더링이 진행되지 않는다! 🤔 그럼 어떻게 할까? ✅ 새로운 객체를 만들어서 그 객체에 변화를 주고 이를 상태로 사용해야한다 ..

Programming/React 2023. 5. 30. 21:59

조건부 렌더링이란? ✅ 특정 조건에 따라 다른 결과물을 렌더링 하는 것 Hello 컴포넌트를 통해 실습 ✅ isSpecial이라는 props를 받도록 구현 ✅ isSpecialdl true면 '특별한' 이라는 글자가 노출되고 false면 비노출되게 처리 cf) JSX에서 null, false, undefined 값을 렌더링하게 되면 아무것도 나타나지 않게 된다. 삼항연산자를 사용한 방법 ✅ 삼항연산자는 주로 특정 조건에 따라 보여줘야하는 내용이 다를 때 사용한다. // Hello.js export default function Hello({ isSpecial }) { return ( {isSpecial ? 특별한 : null} Hello!!!!!!! ); } &&연산자를 사용한 방법 ✅ 이처럼 내용이 달..

Programming/React 2023. 5. 30. 17:28

세팅하기 create-react-app 사용해서 설치하기 ✅ npx create-react-app 명령어 사용 cf) git에 node_modules 폴더는 올리지 않는 것이 낫다. (크기도 크고 파일도 많음) package.json 만 올리면 된다! → package.json에 있는 걸로 설치하면 되니까 프로젝트 실행하기 npm run start 사용 (npm run start == npm start) start 명령어가 실행되면 해당 화면을 확인할 수 있다! npm start 등의 명령어는 package.json 내의 script 쪽에 명시되어있다. ✅ “react-scripts start” : 개발모드로 프로그램 실행 ✅ “react-scripts build” : 실제 배포모드로 만들어줌 ✅ “re..

Programming/React 2023. 5. 22. 23:54