react7 create 1. create버튼 클릭 - > 글 생성 -> 새로운 글이 생성되고 상세보기 페이지로 이동되도록 하자 원시데이터 타입은 그대로 하면 되는데 객체와 배열은 처리방법이 달라진다 데이터를 복제한다...value 값을 복제한 새로운 데이터값이 newvalue값이 된다1. ...value로 복제2. 복제한 데이터 변경3. setValue로 변경 오리지날 value값과 복제해서 setValue한 값이 다르다면 다시 렌더링 해준다 자 위에설명 다시 보자1. 배열로 1의 값이 들어가있고 원래value값에 2를 넣은 뒤에setValue로 원래 있던 value배열에 값을 넣는다면? 똑같은 값으로 인식해서 렌더링 안하는데 2. 두번째 값은 value값이 1이었는데 2로 새로운 값으로 넣기때문에 렌더링한다(다른 데.. 2025. 1. 13. state prop : 컴포넌트를 사용state: 컴포넌트를 만드는 것 이런식으로 클릭했을 경우 mode값을 바꾸어서 출력되는 값을 바꾸고 싶은데 바뀌지않는다클릭시에 다시 app이 다시 실행되면서 ui에 반영되려면? state를 써야한다 _mode로 적고 console에 찍으니까 useState는 배열을 반환함- 0번쨰 원소는 상태의 값을 읽을 때 쓰는 데이터-1번째 데이터는 상태의 값을 변경할 때 사용하는 함수 *** _mode[0]으로 상태값을 mode에 저장 간결하게 쓸수있음 같은문법입 그렇다면 클릭 시 값을 변경할 떄는 setMode를 쓰면 된다결론 : read부분 클릭하면 app컴포넌트가 다시 실행됨. useState가 mode값을 read로 설정.. // welcome이면 welcome으로 자.. 2025. 1. 12. 이벤트 순수한 html코드가 아니라 유사 html코드임리액트 개발환경이 최종적으로 html으로 컨버팅해줌 (onClick 대문자로 해야함) 클릭시 onChangeMode라는 값으로 함수를 전달1.페이지 리로드 막아보자 >> event를 파라미터로 넣어서 event.preventDefault()2. props로 받은 onChangeMode함수를 실행하려면 >> props.onChangeMode()화살표 함수 기본함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다.바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.링크 이벤트가 호출할 때 입력값 id값으로 넣어보기 2025. 1. 12. props 속성을 줘보자 {}안에 넣으면 표현식으로 된다 그냥 넣으면 문자열로됨배열에 담아서 해보자 각각의 태그들은 각각 key란 prop를 가지고 있어야함 2025. 1. 12. 이전 1 2 다음
