전체 글 339

리액트 핵심, useState를 사용하는 다양한 방법

리액트 핵심 1 . 만약 변화하는 데이터를 가지고 있는데 그 변화하는 데이터가 사용자 인터페이스에 반영되어야 한다면 state가 필요하다. 왜냐면 일반적인 변수는 수행하지 않지만 state를 사용하면 값을 설정하고 변경할 수 있기 때문이다. 그리고 state가 바뀌면 리액트는 그 state가 등록된 컴포넌트를 재평가할 것이다. 그리고 다른 컴포넌트는 빼고 그 컴포넌트만 재평가할 것이다. state가 등록된 그 컴포넌트만!! 리액트 핵심 2 . 리액트는 컴포넌트 별 인스턴스를 기반으로 해서 독립적인 state를 갖는다. 1. 가장 일반적은 useState 사용법 const ExpenseForm = () => { const [enteredTitle, setEnteredTtile] = useState('');..

🖥FrontEnd/React 2022.07.23

onClick={clickHandler} 괄호 안쓰는 이유

Change Title ➥ 이렇게 코드를 쓰면, 이 코드 라인이 분석되었을때 자바스크립트가 이것 실행할것이다. 그리고 JSX코드가 반환될 때 이 코드 라인이 분석된다. 즉, 클릭할 때 clickHandler가 실행되는 것이 아니라 JSX코드가 평가될 때 실행된다. 이게 너무 이르기 때문에 clickHandler라고 지정만 해주면 된다. 👇👇👇 Change Title 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

🖥FrontEnd/React 2022.07.23

토이프로젝트 ) 리액트 모달창에서 사진 수정하기, 수정 없이 모달 창 닫으면 해당 데이터만 보이는 에러 해결하기

문제점 1. 업데이트 하는 Modal 부분에서 사진 수정이 안된다. (미리보기도 안되고, 서버한테 사진 데이터 못넘겨줌) 기존 코드 //Modal.js const [photo, setPhoto] = useState(data.photo); // const photoUpdateHandler = (event) => { // let fileInput = false; // if (event.target.files[0]) { // fileInput = true; // } // if (fileInput) { // try { // Resizer.imageFileResizer( // event.target.files[0], // 150, // 150, // "png", // 90, // 0, // (uri) => { /..

리액트 수정 기능이 안돼요! 해결하기, axios, 리액트 CRUD 프로젝트

문제사항 서버로부터 get한 더미데이터와 추가된 데이터를 App.js 파일에서 받고, 이것을 Data.js 파일에서 props로 내려 받아서 map 메서드를 사용해서 뿌려주었다. 그리고 Data.js 에는 Modal.js 파일이 조건에 따라 열리게 구현을 했고, 이 Modal.js 파일에서 수정 버튼을 누르면 해당하는 데이터가 나오고, 수정하기 버튼을 누르면 서버로 데이터를 받아서 이를 App.js에서 받고 이를 Data.js 파일에서 props로 내려 받는 구조입니다. 여기서 문제는 Modal.js 에서 수정하기 버튼을 누르면, 서버에서는 patch로 받아서 데이터를 잘 받지만, 이상하게도 화면상에는 맨 아래 데이터로 붙으면서 수정 기능을 제대로 하지 못했다. 오류해결 며칠 밤낮을 고통스러워 하다가, ..

리액트) 동적으로 클래스 추가해서 css 효과주기

상태를 관리하는 리액트의 클래스를 동적으로 추가해보자! 동적으로 클래스를 추가하기 위해서는 {} 중괄호와 백틱을 써야한다. .form-control.invalid input { border-color: red; background: rgb(246, 197, 197); } .form-control.invalid label { color: red; } 결과 입력없이 버튼을 클릭하면 글씨와 인풋창이 css 효과대로 스타일이 변경됩니다. 유저가 바로 인풋에 입력을 하면 원래대로 돌아옵니다. 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

자바스크립트, if문과 switch 구문 비교하기

day 1 ~ 7에 맞게 Monday ~ Friday로 나오는 if문은 아래와 같다. const day =3; if(day === 1) { console.log('Monday') } else if(day == 2) { console.log('Tuesday') }else if(day == 3) { console.log('Wednesday') } else if(day == 4) { console.log('Thursday') } else if(day == 5) { console.log('Friday') } // 결과값 'Wednesday' 👇 위의 예시를 switch로 바꾸어보자! const day = 3; switch(day) { case 1: console.log('Monday'); case 2: cons..

TIL) 리액트, 빈칸이 입력이 되지 않도록 하기

리액트로 CRUD를 구현하던 중에, 유저가 빈칸을 입력하면 입력이 되지 않도록 하는 코드 입니다. 부모 파일인 App.js에서는 Create에 대한 handler를 자식 파일에게 props로 전달해줍니다. const addGoalHandler = (enteredText) => { setCourseGoals((prevGoals) => { const updatedGoals = [...prevGoals]; updatedGoals.unshift({ text: enteredText, id: Math.random().toString() }); return updatedGoals; }); }; 그리고 자식에서는 그 props를 받아서 submit을 하기 전에, 현재 값의 길이가 0이면 그냥 return 을 해줍니다...

🖥FrontEnd/React 2022.07.20

git) remote origin already exists 에러 해결

깃헙에 새로운 레파지토리를 만들고 푸시를 하려고 하는데 아래와 같이 오류창이 떴습니다. remote origin already exists 해결 방법 원격 저장소와의 연결이 되어 있다고 하니 기존의 연결을 끊고 새로 올리고 싶은 곳에 소스코드를 올리면 됩니다. 1. git remote remove origin 명령어를 입력해서 기존에 연결되어 있는 원격 저장소와의 연결을 끊어줍니다. git remote remove origin 2. git remote add origin [새롭게 연결할 깃 레파지토리 주소] 명령어를 입력합니다. git remote add origin git@github.com:HelloHailie/storybook-practice.git 3. git remote -v 명령어를 입력해서 ..

TIL) 토큰 기반 인증 절차, OAUTH 2.0 이란, JWT

토큰의 개념(Refresh Token과 Access Token의 차이) 쿠키 / 세션 방식과 토큰 방식의 차이 JWT의 작동원리 header, payload, signature의 역할 JWT가 어떻게 토큰의 변조를 판별하는 지 토큰 방식의 한계 Authentication과 Authorization의 차이 Authorization Code와 Access Token의 차이 Authorization 서버와 Resource 서버의 차이에 대해 이해할 수 있다. 토큰 기반 서버나 db에 유저 정보를 담는 세션 기반 인증 방식을 보완한 방식 토큰은 클라이언트에서 인증 정보를 보관한다. 여기서 토큰은 유저 정보를 암호화한 상태로 담을 수 있고, 암호화했기 때문에 클라이언트에 담을 수 있다. 대표적인 토큰 기반 인증 ..

반응형