[JSX] 자바스크립트 꿀팁

{addPackageMaps?.length > 0 && (
  <tr>
    <th align="left">{'패키지'}</th>
    <td
      align="left"
      style={{ paddingBottom: '20px', paddingTop: '-10px' }}
    >
      {addPackageMaps?.map(({ brandName, partsName, partsCode, typeId }) => {
        return isServiced[typeId] === false ? (
          <span
            style={{ textDecoration: 'line-through' }}
          >{`${brandName} / ${partsName} / ${partsCode}`}</span>
        ) : (
          <span>{`${brandName} / ${partsName} / ${partsCode}`}</span>
        );
      })}
    </td>
  </tr>
)}

• .map 같은 매서드를 써서 순회하면서 return을 하려고 할때 위에 처럼 분기 처리할 수 있다.
  
  
  

const [isServiced, setIsServiced] = useState({});

if (addPackageMaps !== undefined) {
  for (let i = 0; i < addPackageMaps.length; i++) {
    for (let j = 0; j < packages.length; j++) {
      if (packages[j].addPackage.productType === addPackageMaps[i].typeId) {
        console.log('same!!!');
        if (packages[j].isServiceComplete === false) {
          setIsServiced(prevState => ({
            ...prevState,
            [addPackageMaps[i].typeId]: false
          }));
        }
      }
    }
  }
}

• 맨날 까먹는 useState append 하는 방법