[TIL-129] 위코드 30일차: React JS - 리팩토링 / JS 코드카타

ReactJS

 

 

form 안의 input 값 reset

개념

 

function Article() {
  const [inputValue, setInputValue] = useState();
  const [comments, setComments] = useState([]);
  const input = useRef();

  const handleComments = event => {
    setInputValue(event.target.value);
  };

  const addComment = event => {
    event.preventDefault();
    setComments([...comments, inputValue]);
    input.current.value = '';
  };
  
  ...
  
}

form에 reset

 

 

 

<input name=" ">  계산된 속성명

개념

비슷한 state와 이벤트 handler 함수를 반복해야 할 때, 계산된 속성명을 이용하여 합쳐줄 수 있다. name 속성을 사용할 수 있는 <input> 태그에서만 가능하다. id와 password <input> 태그에서 값을 받아와야 할 때가 그런 예이다.

 

사용법

function Login() {
  const [inputValue, setInputValue] = useState({ id: '', password: '' });

  const handleInput = event => {
    const { name, value } = event.target;
    setInputValue({ ...inputValue, [name]: value });
  };
  
  return (
      <div className="login">
        <form className="loginForm">
          <input
            name="id"
            onChange={handleInput}
            placeholder="전화번호, 사용자 이름 또는 이메일"
          />
          <input
            name="password"
            onChange={handleInput}
            type="password"
            placeholder="비밀번호"
          />
        </form>
      </div>
  );
}

1. 각각의 <input> 태그에 서로 다른 name 속성을 준다.
2. <input>의 값을 받아올 state의 초기값을 객체 형태로 구성한다. name 속성의 값을 key로 하여, 두 <input> 태그의 값을 저장할 수 있게 된다.
3. 구조분해 할당하듯이 { }
4. setState 함수에서 기존의 state를 ...으로 얕은 복사하고, [name]: value의 프로퍼티를 추가한 객체를 리턴한다.
   1. 프로퍼티명 자리에서 표현식을 쓰려면 [] 대괄호 안에 쓰면 된다.
   2. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#%EA%B3%84%EC%82%B0%EB%90%9C_%EC%86%8D%EC%84%B1%EB%AA%85
5. input

 

 

 

---

 

https://hianna.tistory.com/488

function moreThanHalf(nums) {

  let majorityNum = "";
  
  for(let i=0; i < nums.length; i++) {
    let numsArray = nums.filter(e => nums[i] === e)
    if (numsArray.length > nums.length/2) {
      majorityNum = nums[i];
      return parseInt(majorityNum);
    }
  }

  return majorityNum;
}