React || Part1 블로그 제작 및 기초 문법_05

input 1 : 사용자가 입력한 글 다뤄보기

 

input 태그에는 여러 가지가 있다.(사실 자바스크립트랑 문법이 똑같음) 

 - text, range, date, number 기타 등등

 

input태그에 내용 입력시 코드를 실행하려면??

이런 식으로 쓸 수 있는데,

 

onChange 는 input 태그 안에 사용자가 타이핑할 때마다 안에 코드가 실행된다.(onInput과 동일하다고 보면 됨)

 

 

input태그에 입력한 값 가져오는 법은??

여기서 e는 ??

 >> "이벤트 객체"라고 한다. 

 >> 지금 발생하는 이벤트에 관련한 여러 기능이 담겨있다.

 

응용하여,

 

 

이렇게 코드를 짠 후 직접 input 태그에 작성해 보면,,

검사창에 이렇게 나오는 모습이다.

 

여기서 e.target.value 는 이벤트 발생한 html태그에 입력한 값이라고 생각해 주면 될 거 같다.

 

재미있는 부분 중 하나가 내가 

 

let [practice, setPractice] = useState(["남자 코트 추천","강남 우동 맛집","파이썬 독학",]);

practice 요소를 클릭 시 아래 모달창이 생기게 해 놨는데,

좋아요 표시가 h4태그 안에 있다 보니, 좋아요 표시를 눌러도 모달창이 뜨게 된다.

 

이런 식으로 클린 이벤트는 상위 html 요소로 퍼지는데 이 것을 "이벤트버블링"이라고 한다.

 

이것을 막고 싶다면??

 

 

이렇게 e.stopPropagation()을 써주면 이벤트버블링이 막아진다.

 

사용자가 input에 입력한 데이터 저장하기

 

export default App;

function App (){

let [inputValue, setInputValue] = useState('');

return (

<input onChange={(e)=>{

setInputValue(e.target.value)

console.log(inputValue)

}} />

)

}

 

이 상태에서 실행해 보니 신기한 게 하나 발견되었다.

 

input 창에 12345라고 쳤는데

이런 식으로 처음엔 빈칸이 나온다..

 

왜??

 

>> state변경함수는 늦게 처리된다.(비동기처리) 그래서 js 같은 경우 setInputValue(e.target.value)  가 완료되기 전 다음줄인 consloe.log가 먼저 실행이 되는 것이다.

 

input 2 : 사용자가 입력한 글 다뤄보기

 

예제1) 버튼 클릭시 글 추가되게 해보기.

 

일단 버튼 클릭시 "html 요소 하나 생겨라!" 라고 물론 할 수 있지만,

나는 위에 usestate를 사용하였으니 "practice 배열에 하나 추가 되어라" 라고도 코드를 짤 수 있는 것이다.

 

앞 시간에 배웠던 것 처럼

 

let copy = [...practice];

copy.unshift(inputValue);

setPractice(copy)

이런 식으로 그대로 practice state를 사용하는 게 아니라, copy를 사용하는 것이다.

 

그리고 메서드 중 unshift를 사용하였다.(새로운 요소를 배열의 맨 앞쪽에 추가)

 

그래서 결과물은?

 

 

물론 뒤에 추가 하고 싶으면 unshift 대신 push를 사용해도 된다 !

 

예제2) 삭제 버튼을 누르면 해당 글 없어지게 해보기.

 

<button onClick={() => {

let copy = [...practice];

copy.splice(i,1);

setPractice(copy)

}}>삭제</button>

전체의 반복문이 도는 함수에 1씩 증가하는 i를 그대로 써주면 된다.

 

뒤에 숫자를 2를 하면 해당 i 번째에서 2개가 삭제되는 것이니 참고하면 된다.

 

이런식으로 예제를 하면서, unshift라던지, splice라던지 잘 모르는 메서드가 나오는 경우가 있는데, 필요한 경우 구글링이나 https://developer.mozilla.org/ko/ 여기 들어가서 원하는 것을 찾아다 쓰면 된다.