Dev Lemmy

리액트 블로그 프로젝트 중글 제목 리스트에 사용자가 입력한 데이터를 추가하는 기능을 만들어보려한다. push() 메서드를 사용할 것인데, 배열에 값을 추가해주는 함수로는push(), unshift() 등이 있다.순서대로 배열 끝에 요소 추가, 배열 앞에 요소 추가이고 unshift() 메서드는 나중에 따로 글 정리를 하겠음. push() 메서드를 사용하여 input 태그에 입력한 값을 추가해보도록 하겠다. 먼저 input하는 제목을 관리할 state를 만들어준다.  그리고 이 state를 사용하도록 JSX를 작성한다.이렇게 작성하면 추가되긴 하지만 아래 이미지와 같이 타이핑 할때마다 리스트가 계속 생긴다.이런 상황을 해결하기 위해서 handleAddTitle이라는 함수를 만들고 등록 버튼을 만들어버튼을 ..

블로그 프로젝트에서 사용자가 글 등록을 할 수 있도록 만들어 보겠음.input을 사용해서 입력받도록 진행 참고로 input태그 속성에는 text,range, checkbox, date 등 여러가지가 있으니 골라 사용하면 될 것이고input 말고도 select(드롭 다운 메뉴), textarea 등 여러가지 있다. input에 뭔가 입력시 코드를 실행하고 싶으면 onChange 속성을 사용하면 됨 (onClick과 유사하다고 생각하면 됨) 참고로 이벤트 핸들러는 아주 굉장히 많기때문에 그때그때 검색해서 사용하자 (외울 필요 x)   에 입력한 값 가져오는 방법input 태그를 다룰때 입력한 값을 가져오고 싶을때가 매우 많다. (어디 집어넣거나 할 때)그러면 아래와 같이 onChange 속성의 소괄호에 e라..

진행중인 블로그 프로젝트에서 props를 사용하여 상세페이지를 만들어보겠음게시글들을 클릭하면 Modal 컴포넌트에 누른 게시글의 제목이 랜더링 되도록 코드를 수정해보겠음. 먼저 useState를 사용하여 title state의 몇번째 인덱스 데이터를 가지고 올지 결정할 state를 하나 만든다.그리고 setGetTitle이라는 state 변경 함수를 만들고 사용할 것임.초기 값을 0으로 설정해두고 (인덱스 숫자가 될것임)0일땐 title[0]1일땐 title[1] ...이런식으로 title state의 데이터를 가지고 오도록 사용할 state이다 그럼 setGetTitle 함수를 이용하여 글 제목을 클릭 할 시에 getTitle state의 값이 변경되도록 하면 되는데아래와 같이 코드를 작성해준다..ma..

props라는 중요한 문법을 정리해보자. 저번에 만들었던 Modal 컴포넌트가 랜더링 될 때클릭한 글 제목이 Modal 컴포넌트에서 랜더링 되도록 하고 싶다면  이런식으로 state를 참조하여 title[0]하면 될 텐데이렇게 하면 오류가 발생한다그 이유는 title state는 App()이라는 컴포넌트 안에 정의되어 있기 때문에Modal() 컴포넌트에서는 사용할 수가 없는것이다.(함수 안에서 만든 변수는 함수 바깥에서 사용할 수 없기 때문임)그래서 이렇게 다른 함수의 state를 사용하고 싶을 때 props 문법을 사용해야 한다.  현재 프로젝트의 구조는 App() 이라는 가장 바깥의 컴포넌트 안에 Modal() 컴포넌트가 안에 들어가 있는 구조이다.이런 경우 App()을 부모 컴포넌트, Modal()..

블로그 프로젝트에서제목을 .map() 함수를 이용하여 작성하였는데제목 옆의 엄지버튼을 누르면 추천 숫자가 증가하는 기능을 만들었다.그런데 문제는 반복을 통해 만들어진 모든 제목들이 하나의 state를 참조해서어떤 글 제목을 누르던간에 모든 제목의 추천수가 동일하게 증가하는 문제가 있었다.   그것을 해결하기 위해  먼저 state를 배열로 작성하고  이렇게 copy를 만들어 ...문법을 사용하여 (반드시 해야함 안그러면 랜더링이 안됨)함수의 두번째 파라미터인 i를 사용하여 copy의 인덱스를 가르키도록 하여 각각 다른 배열의 데이터를 참조하도록 하면 됨 저번에 정리한 글이 있으니 ... 문법에 대해 기억이 안난다면 다시 확인해보자https://motorhead.tistory.com/37 [React] a..

for문은 JSX 중괄호 안에서 사용할 수 없기 때문에 map()을 사용해야 한다. js에서 map() 사용하는 방법모든 array에서는 .map()을 사용할 수 있다. 기본으로 제공해주는 함수임 첫번째 기능)[1,2,3,4,5].map(function(){})     -> 소괄호안에 콜백함수 집어넣어주면 됨. 그러면 콜백함수가 array갯수만큼 반복 실행 됨    두번째 기능)map(function(){}) 의 함수 안에 파라미터는 array안에 있던 자료이다.   세번째 기능)return 작성하면 array로 담아서 반환한다.  이런 map() 함수로 리액트 환경에서 쉽게 반복문 사용 가능함  이제 진행중인 블로그 프로젝트에서 map() 함수를 사용해보도록 하겠다.  컴포넌트의 return문 안에 이..

저번 글에서 modal컴포넌트를 만들었지만 항상 노출되어있으므로이번엔 글 제목을 누르면 모달창이 보이도록 기능구현을 해보자.  먼저 동적인 UI를 만드는 순서가 있는데 (모달창뿐만 아니라 탭, 모달창, 툴팁, 햄버거메뉴, 경고문 이런것들 모두 동일) 첫번째로 html css 로 미리 UI의 디자인을 완성해놓는다.두번째로 UI의 현재 상태를 state로 저장세번째로 state에 따라 UI가 어떻게 보일지 작성 (조건문 같은걸로) 이 세가지 순서를 따르면 동적인 UI를 기능개발 할 수 있다.   1. HTML / CSS 로 UI 디자인 해놓기 이렇게 UI 디자인을 하고   2. UI의 현재 상태를 state에 저장 컴포넌트를 사용할 함수에서 useState를 사용하여 state를 만들고 현재상태를 ''로 설..

리액트 블로그에 상세페이지를 만들어보겠음글 제목을 누르면 상세페이지가 뜨도록그런데 화면이 완전이 전환되거나 하는 방식으로 하지않고깔끔하게 모달창을 띄워보는 방식으로 기능 개발을 해보겠다. 먼저 디자인부터 하겠음. 이렇게 모달 div를 만들었다.하지만 html 사용하다보면 div들이 너무 많아서 이게 어떤역할을 하는지 구조도 알기 힘들고코드가 지저분해지는 경우가 많다.리액트에서는 div 한 덩어리를 깔끔하게 한단어로 축약할 수 있는 기능을 제공하는데그것이 바로 컴포넌트이다.그렇게 하면 코드를 처음보는 사람도 어떤 역할을 하는 코드인지 이해하기 쉬울 것이고스스로도 시간이 지난후에 코드를 봤을때 이해가 쉬울것이다.   컴포넌트를 만들어 쓰는 법1. function 만들고2. return() 안에 html 담기..

버튼을 하나 만들어 클릭 시 '남자 코트 추천'이 '여자 코트 추천'으로 변경되게 하였다. 하지만 이렇게 하면 확장성이 없다. 예를 들어 state안에 데이터가 3개뿐이지만 100개가 있다고 치면 100개를 모두 작성해야 하기때문에 비효율적이다 그렇기 때문에 일부분만 바꿔서 집어넣는 프로그래밍식으로 바꾸면 이렇게 작성해주면 되겠다. 하지만 이렇게 짜는것보다 더 좋은 관습으로는 array나 object 데이터를 다룰때는 원본을 수정하지 말고 원본을 보존하는 방식으로 코딩하는게 좋다 그 이유는 원본을 영구적으로 변형시키면 추후에 원본 데이터가 다시 필요할 때 골치아픈 일이 생길것이다. 그러므로 위처럼 let copy = title; 하여 원본 데이터를 복사하여 사용하면 원본 데이터를 보존할 수 있을것이다. ..

useEffect- 매번 컴포넌트가 렌더링 될 때 특정 조건에 의존하여 수행되며, 컴포넌트가 최대한 순수 함수를 유지할 수 있도록 도와주는 함수- 컴포넌트가 마운트될 때와 지정된 의존성이 변경될 때 실행  Hook(훅)이란함수형 컴포넌트에서 상태(state)와 다른 React 기능을 사용할 수 있게 해주는 특별한 함수주요 훅으로는 useState, useEffect, useContext 가 있음 useState - 컴포넌트에 상태를 추가할 수 있음useEffect - 컴포넌트의 생명 주기동안 부수효과(side effects)를 수행할 수 있음. (ex. 데이터 가져오기, 이벤트 리스너 등록 등)useContext - Context API를 사용하여 전역적인 상태를 관리할 수 있음   Mount(마운트)란..