부모컴포넌트와 자식컴포넌트를 import / export 할 때, 데이터도 연결시켜주기 위해서 props를 사용하였다.
지난 글 '폴더구조:container/presentational패턴' 참고
데이터 흐름이 단방향 구조인 리액트에서 props는 부모컴포넌트에서 자식컴포넌트에게만 줄 수 있다.
이러한 특징을 가진 props는 emotion에도 적용이 가능하다.
props를 적용하기 전 작성된 모습이다.
내가 해주고싶은 행동은 모든 input에 공백 없이 값이 들어가야만 버튼 색상이 변경되는 것이다.
이때 props를 사용하여 적용시켜 줄 수 있다.
먼저 useState로 변수를 선언을 해주고
기본 값으로 false를 넣어준다.
false를 넣어주는 이유는 조건문에서 true로 반환될 경우에 버튼의 색을 바꾸어주기 위함이다.
input 값이 입력되는 onChange 메서드에
useState로 선언한 바뀌는 변수 setIsActive를 써서 조건문을 작성해 주었다.
그리고 노란색으로 바뀔 버튼에 onClick함수와 isActive 변수명을 선언했다.
앞에 props가 붙는 이유는 폴더구조를 container / presentational 패턴으로 구조화 했기때문에 container에서 presenter에 props로 데이터를 전달해야하기 때문이다.
지난 글 '폴더구조:container/presentational패턴' 참고
이제 마지막으로 버튼 속성에 삼항연산자를 사용하여 조건을 달아주면 된다.
위의 코드를 말로 해석하면 props.isActive가 참이면 버튼의 배경 색상을 "yellow"를, 거짓이면 ""(기본 버튼 색상)을 적용시켜준다.
오타없이 잘 작성되었다면, 위처럼 input에 모든 값이 작성되었을 때 버튼 색상이 변하는 걸 확인할 수 있다.
오늘은 처음으로 직접 작성한 코드를 캡쳐해서 벨로그를 작성해보았다.
배운 내용이 어렵고 헷갈리는 만큼 오래 기억하기위해 이 방식을 선택했는데 나 스스로는 나름 이해할 수 있을 정도로 작성한 것 같다.
나만의 코드지갑, TIL이 목표였던 벨로그인데 코드를 직접 보여주게 되니 부끄럽기도하다.
앞으로도 이런 방식을 애용할 예정인데 보여지기에 부끄럽지 않게 코드를 간소화하고 깔끔하게 작성하는 법도 더 연습해야겠다.
