분류 전체보기67 "ref"로 작업하기 ref는 참조를 뜻한다. reference의 줄임말. ref의 가장 기보넉인 기능은 다른 DOM요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다. 연습프로젝트에서 했던 코드를 보면, 우리는 form을 가지고 있었고 요소를 가지고 있었다. 사용자가 값을 입력할 때마다 state로 만든 set 함수가 값을 변경시켜 줬다. 이 말인 즉슨 사용자가 키를 누를 때 마다 업데이트하고 그것을 state에 저장하고 그 state를 인풋에 다시 피드해준다. 그리고 나중에 그 state를 사용해 input을 재설정하고 데이터가 필요한 곳으로 보내준다. 하지만 우리는 form을 제출할때만 업데이트가 필요하다. 하지만 키가 입력될때 마다 state가 업데이트되고 있는건 불필요한 동작이다. 이때 사용해야 하는게 ref! .. 2023. 5. 14. 연습프로젝트 시작 # 사용자 컴포넌트 추가하기 컴포넌트를 어떻게 구성할지 생각한 다음, 사용할 컴포넌트를 나눠준다. user를 추가해줘야 하기 때문에 AddUser라는 컴포넌트를 만들고 그 안에 form을 넣어준다. lable과 input을 연결할때 리액트에서는 htmlFor을 사용해 연결해준다. 나이 값을 받을 input과 제출을 위한 button을 넣어주고, form이 제출 되었을때 실행되어야 하는 함수를 만들기 위해 onSubmit 함수를 form에 달아준다. form 이 제출되었을때 새로고침이 되지 않도록 해주는 addUserHandler 함수를 만들어 준 뒤, onSubmit에 연결해준다. 이렇게 만든 컴포넌트를 App.js파일에 import해주고 컴포넌트를 넣어준다. 다음으로 Card 컴포넌트를 만들어주어 UI.. 2023. 3. 24. 리액트 컴포넌트 스타일링 #동적 인라인 스타일 설정하기 리액트에서 컴포넌트별로 css파일을 나눠서 스타일링을 하더라도 사실 이 css는 전역적으로 적용이 되는 애들이다. 하나의 컴포넌트에만 국한되지 않고 전체적으로 동일한 class나 태그라면 스타일이 적용되어 버린다. 현재 스타일링에서는 Add Goal 버튼을 클릭하면 아무런 내용이 없는 박스가 하나 생긴다. 이부분을 수정해 경고창을 날려주도록 해보자 컴포넌트에 조건문을 하나 넣어준다. 폼이 제출될때마다 발생되는 일이기 때문에 해당 함수로 가서 조건문을 넣어준다. .trim() 메소드는 생기는 공백을 제거해준다. enteredValue.trim().length 가 0이라면 어떤 값도 들어오지 않았음을 의미한다 (입력값이 없음). 그럼 바로 return을 해주면 다음 줄에 있는 .. 2023. 3. 15. [JavaScript] function scope & block scope 아래의 예시에서는 var를 사용해 global이라는 변수를 선언했다. 우리가 예상했던건, if문안에서 var를 사용해 global을 선언해주면 if문 안에서만 global이 '지역'으로 뜨고 if 문 밖에서는 원래대로 global이 '전역'으로 뜨는 것이었다. 하지만 if문 밖에서도 global은 '지역'으로 바뀌고 말았다. var global = '전역' if(global==='전역'){ var global = '지역' console.log(global); // 지역 } console.log(global) // 지역 왜 전역공간에 있는 스코프까지 오염이 되어버렸을까? 바로 if문을 사용했기 때문이다. var는 함수단위 스코프인데, if문은 함수가 아니다. 블록단위 스코프로 바꾸지 않는 이상 계속 이런 .. 2023. 3. 10. 이전 1 2 3 4 ··· 17 다음
