Front-end40 [React 기본 일기장 만들기] 데이터 삭제하기 코드보기 앞서 만든 state 배열에서 데이터를 삭제하는 기능을 구현할 것이다. 우선 삭제하기 버튼을 리스트 컴포넌트인 Diary.item에 만든다. 그 다음 App.js에 Delete함수를 추가한다. DiaryList도 위와 같이 수정한다. DiaryItem 컴포넌트를 호출 할 때 받은 onDelete를 추가한다. 이제 DiaryItem에서 삭제 버튼을 누르면 받은 함수가 호출되도록 한다. onDelete props를 받고, 삭제 버튼에 onClick 함수를 만든다. 만약 삭제버튼이 눌리면 정말 삭제하시겠습니까 문구가 뜨는데 이때 window.confirm을 사용하면 화면 상단에 확인 취소 버튼이 뜬다. 이때 삭제를 누르면 onDelete함수가 실해된다. 이제 App.js에서 리스트에서 받은 id의 데.. 2023. 8. 22. [React 기본 일기장 만들기] React에서 배열 사용하기2- 데이터 추가하기 코드 보기 리액트로 프로젝트를 할 때에는 항상 부모 자식간의 관계를 그림으로 표현해보아야 한다. 현재는 이러한 상태이다. 우리는 DiaryEditer에서 쓴 내용을 DiaryList에 추가를 해야 한다. 리액트에서는 같은 레벨에서 데이터를 주고 받을 수 없다. 그래서 위와 같이 상위에 state를 만들고, 이를 DiaryEditer에서 수정하고 DiaryList가 가져오는 방식을 사용할 것이다. editer 내용 저장하기 App.js에 들어가서 기존데이터를 주석처리한 후 data state를 만든다. 초기값은 빈 배열이다. 그 다음 onCreate함수를 만든다. 이 함수는 author, content, emotion을 매개변수로 받고 이를 data 배열에 추가한다. id는 쓸 때마다 하나씩 증가해야하므로.. 2023. 8. 19. [React 기본 일기장만들기] React에서 배열 사용하기 1- 리스트렌더링(조회) 코드 바로가기 이렇게 데이터들을 리스트로 화면에 보여주는 기능을 만들 것이다. 1. 새 파일 만들기 이렇게 새 파일을 만들고, return 값을 만든 후 이를 내보내는 코드를 작성한다. 화면에 보이게 하기 위해서 이렇게 App.js파일을 수정한다. 2.데이터 만들기 App.js에 리스트에 보여줄 데이터를 위와 같이 만든다. id는 데이터들의 고유 번호이고, 나머지는 배열 내의 요소들을 나타낸다. created_date에서 new Date().getTime()을 하면 현재 시간을 숫자형태로 리턴한다. 그 다음 prop로 위 값을 DiaryList에 전달한다. DiaryList에서 이렇게 props값을 전달받고, 전달받은 배열을 리스트형태로 출력한다. diaryList는 배열이니까 map함수를 사용하여 하나.. 2023. 8. 16. [React 기본 일기장 만들기] React에서 DOM조작하기 이번에는 특정 조건을 벗어나는 입력값을 받으면 실행이 되지 않도록 하는 기능을 만들 것이다. 조건에 맞지 않는 입력에 alert 띄우기 alert 대신 focus하기 앞서 DiaryEditor.js에서 버튼을 눌렀을 때 동작하는 handleSubmit 함수를 만들었는데, 이 함수를 아래와 같이 변경해준다. state그룹명.state명.length 을 이용하여 문자열의 길이에 접근할 수 있다. 조건에 맞지 않는 입력에 alert 띄우기 const handleSubmit = (e) =>{ console.log(state); if(state.author.length < 1){ alert("작성자는 최소 1글자 이상 입력해주세요"); return; } if(state.content.length < 5){ ale.. 2023. 8. 15. [React기본 일기장 만들기] React에서 사용자 입력 처리하기 1.기본 파일 설정 2.제목 입력받기 3.내용 입력받기 4.기분 입력받기 5.버튼 만들기 6.스타일 변경하기 1.기본파일 설정 원하는 곳에 새 폴더를 만들고, npx create-react-app 폴더명 을 명령어로 입력한다. 그 다음 사진과 같이 안쓰는 폴더를 제외한 src파일들을 삭제한다. 이번 포스팅에서 만들 페이지는 위와 같이 입력을 처리하고, 선택박스 입력 처리하기, 사용자 입력 데이터 핸들링하기이다. diaryEditer 파일을 만들고 위와 같이 div를 리턴하도록 한다. 나중에 css작업을 원활하게 하기 위해서 div명은 파일명과 객체명과 동일하게 하는 것이 좋다. 그 다음 App.js에 들어가서 DiaryEditer객체를 넣는다. 이 때 import가 제대로 되어있는지 확인한다. 우리가 만.. 2023. 8. 14. [React.js] Props props는 컴포넌트에 데이터를 전달하는 방법이다. App 컴포넌트에서 counter컴포넌트로 데이터를 전달하고 이를 사용해보자. prop 전달하기 이렇게 객체 안에 전달 할 값을 넣어준다.() 그럼 counter.js에서는 이런식으로 매개변수로 값을 받아서 사용하면 된다. prop는 여러개를 해도 되는데 이럴 때는 점표기법을 사용한다.(props.initialValue) 위와 같이 여러개의 prop를 전달할 때에는 가독성이 떨어진다. 그래서 이런 식으로 spread를 사용해서 전달한다. 이때 counter.js에서 위와 같이 매개변수를 설정하면 props에서 a만 받겠다는 의미이다. 기본 props값 설정하기 만약 받은 매개변수에서 원하는 prop이 나오지 않았다면 이 때 사용할 기본값을 지정해야한다... 2023. 8. 13. 이전 1 2 3 4 ··· 7 다음
